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

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

问题如下

图片不显示

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

图像模糊

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

部分代码示例

// 头像;
const imgAvadar = awa IT  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);

&nbs p;

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

总结

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

总结

以上是 为你收集整理的 canvas生成带二维码海报的踩坑记录 全部内容，希望文章能够帮你解决 canvas生成带二维码海报的踩坑记录 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于canvas生成带二维码海报的踩坑记录的详细内容...