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

代码语言：javascript复制

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

代码语言：javascript复制

    // 保存图片到canavs
    let canvas = document.getElementById('canvas')
    canvas.width = width //  上一步获取的宽度
    canvas.height = height
    let ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0, width, height)

代码语言：javascript复制

    // save img
    let link = document.getElementById('link')
    link.href = canvas.toDataURL('image/png')
}

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

代码语言：javascript复制

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

Nginx的配置

代码语言：javascript复制

# ~ 为正则匹配
# * 为忽略大小写
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吧。

代码语言：javascript复制

<img crossorigin='' /> 
复制代码

canvas的其它使用

右键图片保存

可参考下面的这篇文章: weworkweplay.com/play/saving…

canvas http html nginx

0 人点赞