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

Question

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

我的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 文件中。

所以我需要知道位置，并且需要对用户透明。

Answer 1

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

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

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