您的位置:首页 > Web前端 > > 正文

canvas里面图片如何获取(canvas生成带二维码海报的踩坑记录)

更多 时间:2021-10-05 00:13:42 类别:Web前端 浏览量:253

canvas里面图片如何获取

canvas生成带二维码海报的踩坑记录

canvas海报内容有背景图,圆形头像,用户昵称,链接的二维码图片。

问题如下

图片不显示

  • 绘制渲染的时候图像不显示:是因为图片异步加载,所以canvas的操作需要放在onload事件中,否则图片会不显示,因为图片不止一张,建议放在promise中,用async,await调用
  • canvas最终生成图片分享出去,生成的图片不显示:是因为图像跨域问题,设置img的attr,‘crossOrigin'为'Anonymous'就好了,但是要注意,如果不小心为base64也设置了这个参数,在低版本的安卓(我出现问题是在华为安卓4.4.2中)base64就不会显示。

图像模糊

一开始对安卓机型统一做了dpr=1的处理,结果安卓机上图片非常的模糊,圆角头像锯齿严重,网上的解决方法无一成功,后来还是将dpr设为window.devicePixelRatio就好了,只是图片的宽高最好设置为固定值,根据flexble自适应

部分代码示例

  • // 头像;
    const imgAvadar = await promiseLoadImg(this.userInfoExternal.headUrl);
    const imgSize = 40 * this.dpr;
    const imgPos = 24 * this.dpr;
    
    ctx.arc((this.canvas.width / 2), (imgPos + (imgSize / 2)), (imgSize / 2), 0, 2 * Math.PI);
    ctx.clip();
    ctx.drawImage(imgAvadar, ((this.canvas.width / 2) - (imgSize / 2)), imgPos, imgSize, imgSize);
    
  • new Promise(resolve => {
        const img = new Image();
        // base64添加了以下跨域配置,在低版本安卓中会不显示图片
        if (src.indexOf('base64,') === -1) {
            img.setAttribute('crossOrigin', 'Anonymous');
        }
        img.onload = function () {
            resolve(img);
        };
        img.src = src;
    });
    
  • 总结

    以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对开心学习网的支持。

    您可能感兴趣