本文介绍如何使用JavaScript将Canvas内容保存为PNG格式并触发本地下载。通过Base64编码解析生成Blob对象,利用动态创建的a标签及URL.createObjectURL实现文件下载功能,适用于前端图片处理场景。
Canvas图片保存与下载实现
本文整理并精简了一种使用JavaScript将Canvas图像保存为PNG格式并下载至本地的实现方案,供参考分享。
第一步涉及Canvas图像的保存处理。
第二步实现将图像数据下载至本地设备。
function base64Img2Blob(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
function downloadFile(fileName, content){
var aLink = document.createElement('a');
var blob = base64Img2Blob(content); //new Blob([content]);
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(evt);
}
downloadFile('ship.png', canvas.toDataURL("image/png"));
以上为本文分享的全部内容,希望能为读者提供学习上的帮助,并欢迎大家继续支持本站。