将图表图像保存在GWT的特定位置

Save chart image in specific location GWT

本文关键字：定位 位置 GWT 存在 图像 保存      更新时间：2023-09-26

我有以下代码来保存我的谷歌聊天中的图像：

我的HMTL；

   function getImgData(chartContainer) 
   {
        var chartArea = chartContainer.getElementsByTagName('iframe')
[0].contentDocument.getElementById('chartArea');
        var svg = chartArea.innerHTML;
        var doc = chartContainer.ownerDocument;
        var canvas = doc.createElement('canvas');
        canvas.setAttribute('width', chartArea.offsetWidth);
        canvas.setAttribute('height', chartArea.offsetHeight);

        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        doc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL('image/png');
        canvas.parentNode.removeChild(canvas);
        return imgData;
  }
  function saveAsImg(chartContainer) 
  {
      var data = getImgData(chartContainer);
      window.location = data.replace('image/png', 'image/octet-stream');
  }

问题是，向用户询问位置，我想直接保存它，我的意思是，在不询问任何特定位置的情况下，因为我需要这个位置，然后在服务器端将这个图像包含到pdf文件中，所以我需要知道位置，我需要向用户发送它。

谢谢你。

是否希望将图像保存在服务器上而不是客户端上？如果是这样，您将需要服务器上的一个服务，该服务可以接受上传中的图像并将其保存为文件。然后你可以通过AJAX发送图像，类似于以下内容：

function uploadImage (chartContainer) {
    // using jQuery AJAX
    $.ajax({
        url: '/path/to/image/save/service',
        data: {
            image: getImgData(chartContainer)
        },
        type: 'POST'
    });
}

这可能需要调整才能完全正确，但基本概念已经到位。

相关文章：