使用canvas怎么生成带二维码的海报-创新互联
今天就跟大家聊聊有关使用canvas怎么生成带二维码的海报,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
成都创新互联2013年开创至今,先为乌海海南等服务建站,乌海海南等地企业,进行企业商务咨询服务。为乌海海南企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。图片不显示
绘制渲染的时候图像不显示:是因为图片异步加载,所以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; });
看完上述内容,你们对使用canvas怎么生成带二维码的海报有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
网站栏目:使用canvas怎么生成带二维码的海报-创新互联
网页路径:http://scyanting.com/article/hjdhh.html