小程序怎么分享二维码-小程序——分享二维码自定义报告-小程序二维码-即速应用

小程序怎么分享二维码-小程序——分享二维码自定义报告-小程序二维码

浏览量：1475 时间：2020-03-20 来源：weixin_30312557

1.
2.小程序分享报告（图片+二维码）:
3.小程序页面生成图片:请用canvas，页面简单用canvas，页面复杂也用canvas。
4.踩过的坑：思路：html-html2canvas-canvas||image/png;最后涉及到小程序与H5页面项目连接问题（web-view&分享页面），还是用canvas老老实实画的
5.Bug1:小程序，不支持js获取Dom操作，
6.解决1：单独写https的一个H5页面来操作Dom。web-viewsrc='https:xxxxxx….'/web-view会覆盖调分享按钮的btn
7.Bug2:小程序，不支持newImage()，不能自定义定义src，也就不能直接转为canvas或者直接引用分享；
8.解决2：把图片转为base64，传给后台服务器生成图片。（src='banse64'只能显示）。
9.Bug3:小程序，canvas中图片背景空白，不支持https连接获取，只支持本地缓存或者base64。
10.解决3：A.wepy框架，使用路径获取（2M大小内）；
11.B.getWXImg(){let_this=this;wx.getImageInfo({src:'https://cdn.xxxxxxxxxx.com/'+wx.getStorageSync("WxImg"),success(res){_this.wxImg=res.path;_this.$apply();}})};
12.Bug4:报告测试项模板不重置。
13.解决4：循环赋值前，重置为0，或者原始定义的值；
14.Bug5:引入二维码||条行码。
15.//生成二维码
16.importQRfrom'../../common/qrcode.js'
17.createQrCode(url,canvasId,cavW,cavH){
18.wx.showLoading({title:'努力生成中...'})
19.//调用插件中的draw方法，绘制二维码图片
20.QR.api.draw(url,canvasId,cavW,cavH);
21.};
22.最后：
23.wx.canvasToTempFilePath({}）；//生成分享图；
24.wx.saveImageToPhotosAlbum({}）；//保存到相册，注意：生产环境时记得这里要加入获取相册授权的代码；
25.附录
26.c#base64转译图片保存服务器：
27.publicGeneralResponsePost(ExportImageFromBase64req){
28.varresp=newGeneralResponse();
29.varpath=AppConfig.RootDirectory+"Base64/";
30.if(!Directory.Exists(path)){
31.Directory.CreateDirectory(path);
32.}
33.byte[]stream=Convert.FromBase64String(req.Base64);
34.varrandom=newRandom(BabyBusUtilities.Utils.Utilities.GetRandomSeed());
35.varimageName=$"Base64{random.Next()}.jpeg";
36.using(varimageFile=newFileStream(path+imageName,FileMode.Create)){
37.imageFile.Write(stream,0,stream.Length);
38.imageFile.Flush();
39.}
40.resp.Attach=imageName;
41.returnresp;
42.}
43.参考：
44.小程序中如何将页面生成图片？
45.基于html2canvas实现网页保存为图片及图片清晰度优化
46.html2canvas截屏在H5微信移动端踩坑，ios和安卓均可显示