使⽤JavaScript将图⽚保存⾄本地
在最近的开发当中,我们需要为img标签以及canvas动态绘制的图像提供下载功能,下⾯是经过探索后我们得出的结果。⼀、Canvas 版本
// 下载Canvas元素的图⽚
function downloadCanvasIamge(selector, name) {
// 通过选择器获取canvas元素
var canvas = document.querySelector(selector)
// 使⽤toDataURL⽅法将图像转换被base64编码的URL字符串
var url = DataURL('image/png')
// ⽣成⼀个a元素
var a = ateElement('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 = document.querySelector(selector)
// 将图⽚的src属性作为URL地址
var url = img.src
var a = ateElement('a')
var event = new MouseEvent('click')
a.download = name || '下载图⽚名称'
a.href = url
a.dispatchEvent(event)
}
// 调⽤⽅式
// 参数⼀:选择器,代表img标签
// 参数⼆:图⽚名称,可选
downloadIamge('canvas', '图⽚名称')
改进版
由于跨域会导致a标签在部分浏览器中会直接打开新标签页,所以改进如下
function downloadIamge(selector, name) {
var image = new Image()
/
/ 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous')
var canvas = ateElement('canvas')
canvas.width = image.width
canvas.height = image.height
var context = Context('2d')
context.drawImage(image, 0, 0, image.width, image.height)
var url = DataURL('image/png')
// ⽣成⼀个a元素
var a = ateElement('a')
/
/ 创建⼀个单击事件
javascript下载教程var event = new MouseEvent('click')
// 将a的download属性设置为我们想要下载的图⽚名称,若name不存在则使⽤‘下载图⽚名称’作为默认名称
a.download = name || '下载图⽚名称'
// 将⽣成的URL设置为a.href属性
a.href = url
// 触发a的单击事件
a.dispatchEvent(event)
}
image.src = document.querySelector(selector).src
}
// 调⽤⽅式
// 参数⼀:选择器,代表img标签
// 参数⼆:图⽚名称,可选
downloadIamge('canvas', '图⽚名称')
三、总结
我们主要使⽤的是a标签的download属性, 下⾯为MDN给出的说明:
此属性指⽰浏览器下载URL⽽不是导航到URL,因此将提⽰⽤户将其保存为本地⽂件。
如果属性有⼀个值,它将在保存提⽰中⽤作预先填写的⽂件名 (⽤户仍然可以根据需要更改⽂件名)。对允许的值没有限制,但是/和\被转换为下划线。⼤多数⽂件系统限制⽂件名中的⼀些标点符号,浏览器会相应地调整建议的名称。
需要注意的地⽅:
此属性仅适⽤于同源 URLs。
可以使⽤ blob: URLs 和 data: URLs 以⽅便⽤户下载 JavaScript ⽅式⽣成的内容(例如使⽤在线绘图的Web应⽤创建的照⽚)。
如果HTTP头的Content-Disposition:存在,并且赋予了⼀个和这个属性不同的⽂件名,HTTP头优先于此属性。
如果这个属性存在 Content-Disposition 被设置为 inline,⽕狐优先 Content-Disposition,像之前⽂件名的情况下,⽽Chrome则优先download 属性。
参考地址:
MDN a标签的说明:
MDN 关于toDataURL 说明:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论