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

看完上述内容，你们对使用canvas怎么生成带二维码的海报有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。