内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

canvas保存图片的场景分析

2018-07-05 17:38 出处:清屏网 人气: 评论(0

随着浏览器对的canvas的支持,业务上使用的范围也越来越广了。 以前前端需要下载图片时,需要后端在 Content-Disposition: attatchment; filename="xx.png" 的http头,现在用 canvas 也是可以实现的了。

下面完整的Demo在这里

获取图片

CORS

图片与站点同域的还好,由于canvas使用的场景对image的跨域有要求的,得图片的http response返回 Access-Control-Allow-Origin: http://somedomain

async function getImg(src) {
    let img = new Image()    
    img.crossorigin = ''  // allow cors
    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的其它使用

右键图片保存

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

上面是JS中动态生成的img。那么在html中写好的Img标签里设置 crossorigin 属性,浏览器就会抛出``的错误。

<img crossorigin='' />

分享给小伙伴们:
本文标签: canvas

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.

清屏网 版权所有 豫ICP备15026204号