保存画布对象有哪些不同的方法？
在我的研究中，我发现了两种方法：
var data = canvas.toDataURL();
var prev = window.location.href;
window.location.href = data.replace("image/png", "image/octet-stream");
window.location.href = prev;
另一种方法是拍摄快照。
还有其他方法可以做到这一点吗？
是否可以自定义下载文件名？
将 Canvas 元素下载到图像
IT技术
javascript
canvas
download
2021-02-23 02:52:12
6个回答
不需要按钮的解决方案：
var download = function(){
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('canvas').toDataURL()
link.click();
}
如果您有其他下载触发器或您无法轻松引用的触发器，则很有用。
保存的一种方法是导出为图像...您已经找到了这个解决方案，我认为这是最好的解决方案；)
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
这个解决方案更好：
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>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();
我希望这些代码会起作用。但首先在 id 为“cropImageLink”的画布标签中创建锚标签。比检查后。但它在 IE 浏览器中不起作用
尝试这样的事情......
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();
}