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生成图片或直接保存图片的实现方法,供读者参考,欢迎支持。

作者最新文章