canvas保存图片的场景分析(附完整demo)-白红宇

前言

随着浏览器对的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吧。

canvas的其它使用

右键图片保存

可参考下面的这篇文章:

打个广告

公司现在急招前端开发，坐标深圳南山，有兴趣的可以看，直接把简历发我邮箱吧。teal.yao@corp.to8to.com

原文发布时间为：2018年06月26日

原文作者：teal-front

本文来源：如需转载请联系原作者