使用JS保存图表中的图像问题

我面临的问题是，下载图表作为图像选项不适用于最新的chrome浏览器，我试图调试问题，发现下面给出的代码是Flotr2的一部分不起作用。

现场演示：Link （打开上面最新的Chrome浏览器&尝试点击链接 '下载' 布顿）

Flotr.addPlugin('download', { 

    saveImage: function (type, width, height, replaceCanvas) { 
    var 
     grid = this.options.grid, 
     image; 

    if (Flotr.isIE && Flotr.isIE < 9) { 
     image = '<html><body>'+this.canvas.firstChild.innerHTML+'</body></html>'; 
     return window.open().document.write(image); 
    } 

    if (type !== 'jpeg' && type !== 'png') return; 

    image = getImage(
     type, this.canvas, this.ctx, 
     this.canvasWidth, this.canvasHeight, 
     grid && grid.backgroundColor || '#ffffff' 
    ); 

    if (_.isElement(image) && replaceCanvas) { 
     this.download.restoreCanvas(); 
     D.hide(this.canvas); 
     D.hide(this.overlay); 
     D.setStyles({position: 'absolute'}); 
     D.insert(this.el, image); 
     this.saveImageElement = image; 
    } else { 
     var u = navigator.userAgent, isIE = (Flotr.isIE || (new RegExp(/(trident).+rv[:\s]([\w\.]+).+like\sgecko/i)).test(u) || (new RegExp(/(edge)\/((\d+)?[\w\.]+)/i)).test(u)); 

     if (isIE) { 
      return window.open('about:blank').document.body.innerHTML = '<img src="' + image.src+ '">'; 
     } 

     return window.open(image.src); 
    } 
    },

这里，

window.open（ image.src）

在Chrome v.61中打开新选项卡窗口，但不显示任何图像，它是空白页面。

注：同样的功能正在开发最新的Firefox V.56

请建议。

来源

2017-10-12 n33rma

有时Chrome是约'文件很固执：///'协议方案......你使用'file：///'或'http：//'或'https：//'？ –

我附上了截图，其中包含image.src变量的值 – n33rma

我还更新了Live示例的问题以重新生成问题。 – n33rma

为什么不使用某种您可以先打开并在该页面中调用js-function（将其src属性作为参数）的预览文件插入页面中？

像这样：

preview.html：

<!doctype html> 

<head> 
<script> 
function insertImage(dataurl) 
{ 
    document.getElementById("previewImage").src = dataurl; 
} 
</script> 
</head> 
<body> 
    <img id="previewImage" alt="awesome chart" /> 
</body> 

</html>

电话：

var win = window.open("preview.html"); 
win.insertImage(image.src);

来源

2017-10-12 11:25:39 subject42

感谢您的时间，但Flotr2是第三方库，下载图像选项由库自身提供（不适用于Chrome）。我不想添加一个html页面来显示图像，图表已经显示在页面上，这是关于将该图表下载为JPG/PNG文件。 – n33rma

使用JS保存图表中的图像问题

回答

相关问题