小程序——分享二維碼自定義報告

小程序分享報告（圖片+二維碼）: 

小程序頁面生成圖片:請用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和安卓都可顯示