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

用户2845596

发布于 2021-01-21 15:08:24

6650

发布于 2021-01-21 15:08:24

文章被收录于专栏：劝学

前言

随着浏览器对的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')
}

当然为了使点击动作为下载，使不是新标签页打开，要设置a标签的download属性

<a href="javascript:;" download="xxx.png" id="download">download imga>
复制代码

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吧。