随着浏览器对的canvas的支持,业务上使用的范围也越来越广了。 以前前端需要下载图片时,需要后端在Content-Disposition: attatchment; filename="xx.png"
的http头(nginx的配置方式可以直接 看最下面),现在用canvas
也是可以实现的了。
下面完整的Demo在这里
demo里有两个图片链接,分别是设置了cors头部了和没有设置的。读者朋友可以自行设置看下效果,注意打开console面板看下报错
图片与站点同域的还好,由于canvas使用的场景对image的跨域有要求的,得图片的http response返回Access-Control-Allow-Origin: http://somedomain
async function getImg(src) {
let img = new Image()
img.crossOrigin = '' // allow cors, 这里是camelCase,不是crossorigin
let [width ,height] = await new Promise(resolve => {
img.onload = function () {
// 获取图片的原始尺寸
resolve([img.naturalWidth, img.naturalHeight])
}
img.src = src
})
复制代码
// 保存图片到canavs
let canvas = document.getElementById('canvas')
canvas.width = width // 上一步获取的宽度
canvas.height = height
let ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, width, height)
// save img
let link = document.getElementById('link')
link.href = canvas.toDataURL('image/png')
}
当然为了使点击动作为下载,使不是新标签页打开,要设置a标签的download属性
<a href="javascript:;" download="xxx.png" id="download">download imga>
复制代码
# ~ 为正则匹配
# * 为忽略大小写
location ~* \.(jpe?g|png|gif|webp)$ {
# 此行添加头部
add_header Access-Control-Allow-Origin *;
root /data/images;
try_files $uri =404;
}
上面是JS中动态生成的img。在html中写好的Img标签里设置crossorigin
属性,浏览器就会抛出DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
的错误。所以避免在html里写对应的Img吧。
<img crossorigin='' />
复制代码
可参考下面的这篇文章: weworkweplay.com/play/saving…