将Canvas元素下载到图像

Question

保存画布对象的不同方法有哪些？

在我的研究中,我发现了两种方法:

var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;

另一种方法是拍摄快照.

还有其他方法吗？

是否可以自定义下载文件名？

Answer 1

保存的一种方法是导出为图像...您已经找到了这个解决方案,这是我认为最好的一个;)

    var canvas = document.getElementById("mycanvas");
    var img    = canvas.toDataURL("image/png");
    document.write('<img src="'+img+'"/>');

您可以使用不同的图像类型.更改此函数中的mimetype:

    canvas.toDataURL("image/jpeg");

另一种将画布数据保存到PDF中的方法是使用wkhtmltopdf库

干杯.坦率

frankneff.ch/@frankneff

Answer 2

这个解决方案更好:

function download() {
var download = document.getElementById("download");
var image = document.getElementById("myCanvas").toDataURL("image/png")
    .replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}

<a id="download" download="triangle.png">
<button type="button" onClick="download()">Download</button>
</a>
    
<canvas id="myCanvas" width="720" height="450">Your browser does not support Canvas.</canvas>

Answer 3

不需要按钮的解决方案：

var download = function(){
  var link = document.createElement('a');
  link.download = 'filename.png';
  link.href = document.getElementById('canvas').toDataURL()
  link.click();
}

如果您有其他要下载的触发器或无法轻松引用的触发器，则很有用。

Answer 4

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();

我希望这些代码能够正常工作.但首先在canvas标签中创建其标签为'cropImageLink'的Anchor标签.比检查后.但它不适用于IE浏览器

Answer 5

尝试这样的事情......

function downloadCanvasAsImage(){

    let canvasImage = document.getElementById('canvas').toDataURL('image/png');
    
    // this can be used to download any image from webpage to local disk
    let xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function () {
        let a = document.createElement('a');
        a.href = window.URL.createObjectURL(xhr.response);
        a.download = 'image_name.png';
        a.style.display = 'none';
        document.body.appendChild(a);
        a.click();
        a.remove();
      };
      xhr.open('GET', canvasImage); // This is to download the canvas Image
      xhr.send();
}