使用帆布怎么生成带二维码的海报

  介绍

今天就跟大家聊聊有关使用帆布怎么生成带二维码的海报,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强>图片不显示

<李>

绘制渲染的时候图像不显示:是因为图片异步加载,所以帆布的操作需要放在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;   });

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

使用帆布怎么生成带二维码的海报