使用QrCode生成二维码,并保存海报到本地问题
问题一:生成的二维码太密
原因分析
- 二维码的密度和二维码里面的内容有关,如果里面的内容过多则会出现二维码非常密集,甚至扫描不出二维码;
解决方案
- 二维码一般有容错率,容错率越高表示二维码模糊面积越少,二维码也就越清晰,设置容错率低可以一定程度上
- 将地址先压缩,然后再生成二维码,在使用的地方使用对应的解压方法(pako等)
- 先将地址转成短网址,然后利用短网址生成二维码(可能存在访问不到短网址的情况)
问题二:保存的图片很模糊
需求中生成的二维码需要保存,生成出来二维码还是比较清晰,保存图片后很模糊,由于保存的图片中有背景图,二维码还有文字,这里是使用canvas绘制然后保存的
原因分析
- 在使用过程中将图片转为base64后,然后在显示base64的图片就会很模糊
解决方案:
- 动态创建img标签,设置图片属性src为从接口获取的图片地址,将图片画在canvas
问题三:H5将拍照的图片转换为base64过大,导致页面卡死
原因分析
- 手机拍出来的照片越来越大,导致转换出来的base可高达几十万,这种情况可能会导致页面直接卡死
解决方案
- 利用canva功能,将图片画到画布上,在生成画布时,通过控制画布的大小,来控制图片的大小
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.width = 400;
canvas.height = 300;
// 核心JS就这个
context.drawImage(img,0,0,400,300);- 利用第三方插件如compression.js