前言
随着浏览器对的 canvas 的支持, 业务上使用的范围也越来越广了. 以前前端需要下载图片时, 需要后端在
Content-Disposition: attatchment; filename="xx.png"
的 http 头, 现在用 canvas 也是可以实现的了.
下面完整的 Demo 在这里 https://jsfiddle.net/yaow1990/xoyze2p5/15/ 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')
- }
canvas 的其它使用
右键图片保存
可参考下面的这篇文章: https://weworkweplay.com/play/saving-html5-canvas-as-image/
坑
上面是 JS 中动态生成的 img. 那么在 html 中写好的 Img 标签里设置 crossorigin 属性, 浏览器就会抛出 `` 的错误.
<img crossorigin='' />
打个广告
公司现在急招前端开发, 坐标深圳南山, 有兴趣的可以看 [这里][https://github.com/teal-front/code-snippets/issues/2], 直接把简历发我邮箱吧. teal.yao@corp.to8to.com
来源: https://juejin.im/post/5b31efb3e51d4558dd699755