canvas 海报,如何生成二维码海报

　　画布海报包括背景图片、圆头、用户昵称和链接的二维码。

　　问题如下

　　图片不显示

　　渲染时，不显示图像：由于图像是异步加载的，需要将canvas的操作放在onload事件中，否则，图像不会显示。因为不止一个形象，建议放在无极里。async和await用于调用canvas最终生成图像并共享。生成的图片不显示：因为图片的跨域问题，设置img的attr，好的是 crossOrigin 是匿名，但是请注意，如果不小心也为base64设置了这个参数，那么在Android的较低版本就不会显示base64(我的问题在华为Android 4.4.2)。图像模糊

　　一开始安卓机型都是统一处理dpr=1。结果安卓机上的图像非常模糊，圆润的头部锯齿严重。没有一个在线解决方案是成功的。后来，最好将dpr设置为window.devicePixelRatio，但图像的宽度和高度最好设置为固定值，并根据flexble进行自适应。

　　一些代码示例

　　//头像；const imgAvadar=await promiseLoadImg(this . userinfoexternal . head URL)；const imgSize=40 * this.dprconst imgPos=24 * this.dprctx.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、img size、img size)；

　　new Promise(resolve={ const img=new Image()；//base64增加了以下跨域配置，在Android较低版本中不会显示图片if (src.indexof (Base64，)==-1){ img . set attribute( cross origin ， anonymous )；} img . onload=function(){ resolve(img)；};img.src=src});总结

　　这就是本文的全部内容。希望这篇文章的内容对你的学习或工作有一定的参考价值。谢谢你的支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。