介绍
今天就跟大家聊聊有关使用帆布怎么生成带二维码的海报,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
<强>图片不显示强>
- <李>
绘制渲染的时候图像不显示:是因为图片异步加载,所以帆布的操作需要放在onload事件中,否则图片会不显示,因为图片不止一张,建议放在承诺中,用异步,等待调用
李> <李>帆布最终生成图片分享出去,生成的图片不显示:是因为图像跨域问题,设置img的attr,,只要crossOrigin& # 39;为& # 39;匿名# 39;就好了,但是要注意,如果不小心为base64也设置了这个参数,在低版本的安卓(我出现问题是在华为安卓10/24/11中)base64就不会显示。
李><强>图像模糊强>
一开始对安卓机型统一做了dpr=1的处理,结果安卓机上图片非常的模糊,圆角头像锯齿严重,网上的解决方法无一成功,后来还是将dpr设为window.devicePixelRatio就好了,只是图片的宽高最好设置为固定值,根据弹性体自适应
部分代码示例
//,头像; 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 承诺(resolve =祝辞,{ ,,,const img =, new 图像(); ,,,//,base64添加了以下跨域配置,在低版本安卓中会不显示图片 ,,,if (src.indexOf (& # 39; base64, & # 39;),===, 1), { ,,,,,,,img.setAttribute (& # 39; crossOrigin& # 39;,, & # 39;匿名# 39;); ,,,} ,,,img.onload =, function (), { ,,,,,,,解决(img); ,,,}; ,,,img.src =, src; });
看完上述内容,你们对使用帆布怎么生成带二维码的海报有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。