今天小编跟大家讲解下有关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;});总结
以上就是这篇文章的全部内容了 希望本文的内容对大家的学习或者工作具有一定的参考学习价值 谢谢大家对AIDI的支持。
来源：爱蒂网
