小程序——分享二维码报告

Posted 2021-02-10 Y.anCy

小程序分享报告（图片+二维码）: 

小程序页面生成图片:请用canvas，页面简单用canvas，页面复杂也用canvas。

 

踩过的坑： 思路：html  ->  html2canvas  ->  canvas||image/png; 最后涉及到小程序与H5页面项目连接问题（web-view &分享页面），还是用canvas老老实实画的

Bug1:小程序，不支持js获取Dom操作，

解决1：单独写https的一个H5页面来操作Dom。     <web-view  src=\'https:xxxxxx….\' >  </web-view>会覆盖调分享按钮的btn

Bug2:小程序，不支持 new Image()， 不能自定义定义src，也就不能直接转为canvas或者直接引用分享；

解决2：把图片转为base64，传给后台服务器生成图片。（src=\'banse64\' 只能显示）。

Bug3:小程序，canvas中图片背景空白，不支持https连接获取，只支持本地缓存或者base64。

解决3：A.wepy框架，使用路径获取（2M大小内）；

            B. getWXImg(){
         　　　　let _this = this;
         　　　　wx.getImageInfo({
            　　 　　src: \'https://cdn.xxxxxxxxxx.com/\'+wx.getStorageSync("WxImg"),
             　　　　success (res) {
                 　　　　_this.wxImg = res.path;
                 　　　　_this.$apply();
             　　　　}
        　　　　 })
    　　 　};

Bug4:报告测试项模板不重置。

解决4：循环赋值前，重置为0，或者原始定义的值；

Bug5:引入二维码||条行码。

//生成二维码

import QR from \'../../common/qrcode.js\'

createQrCode(url, canvasId, cavW, cavH) {        

　　wx.showLoading({title: \'努力生成中...\'})  

　　//调用插件中的draw方法，绘制二维码图片  

　　QR.api.draw(url, canvasId, cavW, cavH);  

};

最后：

wx.canvasToTempFilePath({}）；//生成分享图；

wx.saveImageToPhotosAlbum({}）；//保存到相册，注意：生产环境时 记得这里要加入获取相册授权的代码；

 

附录

c# base64转译图片保存服务器：

 

 

 

 public GeneralResponse Post(ExportImageFromBase64 req)         {            

　　var resp = new GeneralResponse();

　　var path = AppConfig.RootDirectory + "Base64/";            

　　if (!Directory.Exists(path))             {                

　　　　Directory.CreateDirectory(path);            

　　}

　　byte[] stream = Convert.FromBase64String(req.Base64);            

　　var random = new Random(BabyBusUtilities.Utils.Utilities.GetRandomSeed());            

　　var imageName = $"Base64{random.Next()}.jpeg";                        

　　using (var imageFile = new FileStream(path + imageName, FileMode.Create))             {                

　　　　imageFile.Write(stream, 0, stream.Length);                               

　　　　imageFile.Flush();            

　　}            

resp.Attach = imageName;                           

return resp;        

}

 

参考：

 

小程序中如何将页面生成图片？

基于html2canvas实现网页保存为图片及图片清晰度优化

html2canvas截屏在H5微信移动端踩坑，ios和安卓均可显示