前言
随着浏览器对的canvas的支持，业务上使用的范围也越来越广了。 以前前端需要下载图片时，需要后端在Content-Disposition: attatchment; filename="xx.png"的http头（nginx的配置方式可以直接 看最下面），现在用canvas也是可以实现的了。
下面完整的Demo在这里
demo里有两个图片链接，分别是设置了cors头部了和没有设置的。读者朋友可以自行设置看下效果，注意打开console面板看下报错
获取图片
CORS
图片与站点同域的还好，由于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
})
保存图片到canvas
// 保存图片到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')
}Nginx的配置
# ~ 为正则匹配
# * 为忽略大小写
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='' /> canvas的其它使用
右键图片保存
可参考下面的这篇文章: weworkweplay.com/play/saving…
打个广告
公司现在急招前端开发，坐标深圳南山，有兴趣的可以看这里，直接把简历发我邮箱吧。teal.yao@corp.to8to.com
原文作者：teal-front
本文来源： 掘金 如需转载请联系原作者
