微信浏览器将html保存为图片并保存

需求:将含有二维码的html转化成图片并保存

思路:

1.将html页面转化成图片需要使用H5中canvas(画布)功能,需要引入js库:

html2canvas.js

canvas2image.js

jquery.min.js(必须要)

qrcode.min.js (用于二维码的生成)

 

 

2.通过qrcode.min.js 生成其相应的二维码,并将其通过画布绘制成图片,并将其存入到二维码位置,并将画布绘制的图片进行隐藏;

3.将html页面进行canvas绘制成图片(会显示出三个相同的页面,1个是html页面,1个是canvas绘制的容器,1个是生成的图片);

思路:

第一步:将绘制容器canvas进行style:border:0;

第二步:将生成图片存放在html页面上,并将其设置成透明(style="top:0;left:0;width:100%;opacity:0;"

4.使用jquery写入函数自加载运行,长按保存图片

源码:











































分享中心

 

你可能感兴趣的:(MUI框架)