JavaScript实现Canvas图片保存为PNG并下载至本地
作者:小圆点时间:2026-10-22 07:48:28浏览:502
本文介绍如何使用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"));
以上为本文分享的全部内容,希望能为读者提供学习上的帮助,并欢迎大家继续支持本站。
作者最新文章
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型:HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部:scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09
