使用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保存圖表中的圖像問題

回答

相關問題