JS实现Canvas生成图片保存及直接下载图片的方法
作者:竹影时间:2026-10-22 11:28:22浏览:236
本文介绍了两种在JavaScript中保存图片的方法。第一种是将Canvas元素转换为数据URL,通过动态创建a标签实现下载;第二种是直接获取图片DOM对象的src属性进行保存。两种方法均利用a.download属性指定文件名,并通过click触发下载,适用于前端图片处理场景。
Canvas生成图片保存方法
实现将Canvas内容保存为图片的功能。
function downLoadImage(canvas,name) {
var a = document.createElement("a");
a.href = canvas.toDataURL();
a.download = name;
a.click();
}
参数canvas代表传入的Canvas DOM对象。
参数name用于指定保存后的图片文件名。
直接保存图片方法
介绍直接保存现有图片的方法。
function downLoadImage(img,name) {
var a = document.createElement("a");
a.href = img.src;
a.download = name;
a.click();
}
参数img代表传入的图片DOM对象。
参数name用于指定保存时的图片文件名。
以上分享了JavaScript中保存Canvas生成图片或直接保存图片的实现方法,供读者参考,欢迎支持。
作者最新文章
JS怎么使用classList添加、删除和切换class
2026-11-05 17:26:02
网页开发三者分工:HTML结构、CSS样式与JavaScript交互怎么协作
2026-11-05 12:51:22
JS解析URL参数时怎么处理中文乱码和特殊字符
2026-11-05 12:47:23
js-cookie 存储 JSON 对象:自动序列化与反序列化技巧
2026-11-05 12:36:26
marked.js 快速上手:安装与基础 Markdown 转 HTML 示例
2026-11-05 09:32:53
