脚本宝典收集整理的这篇文章主要介绍了canvas生成带二维码海报的踩坑记录,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
canvas海报内容有背景图,圆形头像,用户昵称,链接的二维码图片。
问题如下
图片不显示
图像模糊
一开始对安卓机型统一做了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生成带二维码海报的踩坑记录全部内容,希望文章能够帮你解决canvas生成带二维码海报的踩坑记录所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。