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;
});

总结

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