微信小程序 點擊生成朋友圈分享圖

上個月boss交給我個微信小程序的活，告訴我只須要負責前端頁面這塊，問我多久作完，因而我不知天高地厚的說  一禮拜就能完工，哈哈哈，果真，現實老是那麼無情的來打臉了。。。磨磨蹭蹭一共用了將近3個禮拜纔算完事。

今天就來總結下遇到的各類坑好了~~~

因爲作的是仿照包你說的小程序，這裏就借用包你說的截圖好啦

（這個作出來是模擬器跟真機上都會顯示生成的圖片的，鬼知道是爲啥。。）

 

唔，不廢話了，直接上代碼好啦

A:wxml(必定要加上image標籤，若是你沒有加的話，那麼即便圖片生成了，在頁面上也是不會顯示的，問過大神以後我才知道我以前一直沒弄出來是由於我沒加image標籤)

1 <view hidden="{{maskHidden}}" class="mask"></view> 
2 <view class='canvas-box'>
3     <canvas style="width:750rpx; height:940rpx;" canvas-id="myCanvas"/>
4     <image src='{{imagePath}}'></image>  
5 </view>

B:wxss（canvas-box的樣式運行出來不會受影響，就是千萬別寫top：0；必定要往下點，要否則會遮蓋住原頁面自己的東西，致使原頁面button按鈕全沒效果）

1 .mask{position: fixed;top: 0;left: 0; width: 100%;height: 100%;background: rgba(0, 0, 0,1);opacity: 0; display: flex;justify-content: center; align-items: center;}
2 .canvas-box{position: fixed;top: 999999rpx;left: 0}

 C:js重點來了（實話實說，我也是照着網上的demo改的，不懂的千萬不要來找我問，跪求，本人渣渣一枚。。。）

  1 //share.js
  2 Page({
  3   data: {
  4     imagePath: "/images/shareimg_bg.jpg",
  5     imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",
  6     imageEwm: "/images/ewm.jpg",
  7     maskHidden: true,
  8   },
  9   onLoad: function (options) {
 10     // 頁面初始化 options爲頁面跳轉所帶來的參數
 11     var size = this.setCanvasSize();//動態設置畫布大小
 12     // this.createNewImg();
 13     //建立初始化圖片
 14   },
 15   //適配不一樣屏幕大小的canvas    生成的分享圖寬高分別是 750  和940，老實講不知道這塊到底需不須要，然而。。仍是放了，由於不寫這塊的話，模擬器上的圖片大小是不對的。。。
 16   setCanvasSize: function () {
 17     var size = {};
 18     try {
 19       var res = wx.getSystemInfoSync();
 20       var scale = 750;//畫布寬度
 21       var scaleH = 940 / 750;//生成圖片的寬高比例
 22       var width = res.windowWidth;//畫布寬度
 23       var height = res.windowWidth * scaleH;//畫布的高度
 24       size.w = width;
 25       size.h = height;
 26     } catch (e) {
 27       // Do something when catch error
 28       console.log("獲取設備信息失敗" + e);
 29     }
 30     return size;
 31   },
 32   //將1繪製到canvas的固定
 33   settextFir: function (context) {
 34     let that=this;
 35     var size = that.setCanvasSize();
 36     var textFir = "發了一個紅包";
 37     console.log(textFir);
 38     context.setFontSize(24);
 39     context.setTextAlign("center");
 40     context.setFillStyle("#fee6b5");
 41     context.fillText(textFir, size.w / 2, size.h * 0.25);
 42     context.stroke();
 43   },
 44   //將2繪製到canvas的固定
 45   settextSec: function (context) {
 46     let that = this;
 47     var size = that.setCanvasSize();
 48     var textSec = "長按識別小程序，領獎金";
 49     context.setFontSize(14);
 50     context.setTextAlign("center");
 51     context.setFillStyle("#fee6b5");
 52     context.fillText(textSec, size.w / 2, size.h * 0.88);
 53     context.stroke();
 54   },
 55   //將canvas轉換爲圖片保存到本地，而後將圖片路徑傳給image圖片的src
 56   createNewImg: function () {
 57     var that = this;
 58     var size = that.setCanvasSize();
 59     var context = wx.createCanvasContext('myCanvas');
 60     var path = "/images/shareimg_bg.jpg";
 61     var imageTx = that.data.imageTx;
 62     var imageEwm = that.data.imageEwm;
 63     var imageZw = "/images/xcxewm.png";
 64     context.drawImage(path, 0, 0, size.w, size.h);
 65     context.drawImage(imageTx, size.w / 2 - 25, size.h * 0.02, size.w * 0.14, size.w * 0.14);
 66     context.drawImage(imageEwm, size.w / 2 - 60, size.h * 0.32, size.w * 0.33, size.w * 0.33);
 67     context.drawImage(imageZw, size.w / 2 - 25, size.h * 0.7, size.w * 0.14, size.w * 0.14);
 68     this.settextFir(context);
 69     this.settextSec(context);
 70     console.log(size.w, size.h)
 71     //繪製圖片
 72     context.draw();
 73     //將生成好的圖片保存到本地，須要延遲一會，繪製期間耗時
 74     wx.showToast({
 75       title: '生成中...',
 76       icon: 'loading',
 77       duration: 2000
 78     });
 79     setTimeout(function () {
 80       wx.canvasToTempFilePath({
 81         canvasId: 'myCanvas',
 82         success: function (res) {
 83           var tempFilePath = res.tempFilePath;
 84           console.log(tempFilePath);
 85           that.setData({
 86             imagePath: tempFilePath,
 87             canvasHidden: false,
 88             maskHidden: true,
 89           });
　　　　　　　　//將生成的圖片放入到《image》標籤裏

 90           var img = that.data.imagePath;
 91           wx.previewImage({
 92             current: img, // 當前顯示圖片的http連接
 93             urls: [img] // 須要預覽的圖片http連接列表
 94           })
 95         },
 96         fail: function (res) {
 97           console.log(res);
 98         }
 99       });
100     }, 2000);
101   },
102 
103 })

以上，出來的效果是醬紫的  （渣渣實在不知道要怎麼把頭像和二維碼畫成圓角矩形的和圓形的了，還好產品大大不挑剔，感謝）

固然 ，若是有小可愛能解決這個問題的話，還望不吝指教~~~

再講一遍，以上代碼，尤爲是js代碼，是我找網上的demo改的，不是我原創，謝謝

下班。。。