在最近的开发当中,我们需要为img标签以及canvas动态绘制的图像提供下载功能,下面是经过探索后我们得出的结果。
一、Canvas 版本
// 下载Canvas元素的图片
function downloadCanvasIamge(selector, name) {
// 通过选择器获取canvas元素
var canvas = document.querySelector(selector)
// 使用toDataURL方法将图像转换被base64编码的URL字符串
var url = canvas.toDataURL('image/png')
// 生成一个a元素
var a = document.createElement('a')
// 创建一个单击事件
var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图片名称,若name不存在则使用‘下载图片名称’作为默认名称
a.download = name || '下载图片名称'
// 将生成的URL设置为a.href属性
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
}
// 调用方式
// 参数一: 选择器,代表canvas
// 参数二: 图片名称,可选
downloadCanvasIamge('canvas', '图片名称')
二、img 标签版本
// 下载
function downloadIamge(selector, name) {
// 通过选择器获取img元素
var img &