function save(n) {
const canvas = document.getElementsByTagName('canvas')[0],
// canvas的base64编码数据
dataURL = canvas.toDataURL('image/png'),
// 因为图片文件过大时,Blob就不会因为浏览器上下载失败
src = dataURLtoBlob(dataURL),
name = n + ".png";
// IE
if (window.navigator.msSaveOrOpenBlob) {
navigator.msSaveBlob(src, name);
} else {
const link = document.createElement("a");
link.setAttribute("href", window.URL.createObjectURL(src));
link.setAttribute("download", name);
document.body.appendChild(link);
link.click();
}
function dataURLtoBlob(dataurl) {
constarr = dataurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
byte = atob(arr[1]),
n = byte .length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = byte .charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
}
Canvas保存为图片
于 2023-05-18 11:00:22 首次发布
该代码段展示了如何将HTML5canvas元素的内容转换为base64编码的图像数据,然后进一步转换为Blob对象,以便在不同浏览器(包括IE)中进行保存。函数functionsave使用canvas的toDataURL方法获取图像数据,通过dataURLtoBlob函数将数据转化为Blob,最后提供了一个跨浏览器的保存机制。
摘要由CSDN通过智能技术生成