圖像到窗口不開放下載

Question

我正在將畫布轉換爲似乎工作正常的圖像。

但圖像是在一個新窗口中打開，而不是直接下載。

任何幫助我可以做到這一點？

HTML：

<div class="sixteen columns"> 
    <br /> 
     <canvas id="qrcodeCanvas"></canvas> 
     <br /><br /> 
     <div class="button qrDownload">Download</div> 
    </div> 

JQuery的：

$(".qrDownload").click(function (event) { 
     var canvas = document.getElementById("qrcodeCanvas"); 
     var img = canvas.toDataURL("image/png"); 
     document.write('<img src="' + img + '"/>'); 
    }); 

Answer 1

試試這個：

$(".qrDownload").click(function (event) { 
    var html="<p>Right-click on image below and Save-Picture-As</p>"; 
    html+="<img src='"+canvas.toDataURL()+"' alt='from canvas'/>"; 
    var tab=window.open(); 
    tab.document.write(html); 
}); 

另外：

.toDataURL如果您在畫布上從另一個域中繪製圖像導致跨域安全問題將會失敗。

Answer 2

var c = document.getElementById("popup"); 
var link = document.getElementById('cropImageLink'); 
// link.setAttribute('download', 'MintyPaper.png'); 
link.setAttribute('href', c.toDataURL("image/png").replace("image/png", "image/octet-stream")); 
link.click(); 
link.open(); 

之後，您可以在下面添加以在新窗口中打開。如果刪除註釋比使用window.open（）;它應該在新窗口中打開。