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

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

由於做的是仿照包你說的小程式，這裡就借用包你說的截圖好啦

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

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

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

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

B:wxss（canvas-box的樣式執行出來不會受影響，就是千萬別寫top：0；一定要往下點，要不然會遮蓋住原頁面本身的東西，導致原頁面button按鈕全沒效果）

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

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

//share.js
Page({
 data: {
 imagePath: "/images/shareimg_bg.jpg",imageTx: "http://img0.imgtn.bdimg.com/it/u=1079555585,1801783759&fm=27&gp=0.jpg",imageEwm: "/images/ewm.jpg",maskHidden: true,},onLoad: function (options) {
 // 頁面初始化 options為頁面跳轉所帶來的引數
 var size = this.setCanvasSize();//動態設定畫布大小
 // this.createNewImg();
 //建立初始化圖片
 },//適配不同螢幕大小的canvas 生成的分享圖寬高分別是 750 和940，老實講不知道這塊到底需不需要，然而。。還是放了，因為不寫這塊的話，模擬器上的圖片大小是不對的。。。
 setCanvasSize: function () {
 var size = {};
 try {
  var res = wx.getSystemInfoSync();
  var scale = 750;//畫布寬度
  var scaleH = 940 / 750;//生成圖片的寬高比例
  var width = res.windowWidth;//畫布寬度
  var height = res.windowWidth * scaleH;//畫布的高度
  size.w = width;
  size.h = height;
 } catch (e) {
  // Do something when catch error
  console.log("獲取裝置資訊失敗" + e);
 }
 return size;
 },//將1繪製到canvas的固定
 settextFir: function (context) {
 let that=this;
 var size = that.setCanvasSize();
 var textFir = "發了一個紅包";
 console.log(textFir);
 context.setFontSize(24);
 context.setTextAlign("center");
 context.setFillStyle("#fee6b5");
 context.fillText(textFir,size.w / 2,size.h * 0.25);
 context.stroke();
 },//將2繪製到canvas的固定
 settextSec: function (context) {
 let that = this;
 var size = that.setCanvasSize();
 var textSec = "長按識別小程式，領獎金";
 context.setFontSize(14);
 context.setTextAlign("center");
 context.setFillStyle("#fee6b5");
 context.fillText(textSec,size.h * 0.88);
 context.stroke();
 },//將canvas轉換為圖片儲存到本地，然後將圖片路徑傳給image圖片的src
 createNewImg: function () {
 var that = this;
 var size = that.setCanvasSize();
 var context = wx.createCanvasContext('myCanvas');
 var path = "/images/shareimg_bg.jpg";
 var imageTx = that.data.imageTx;
 var imageEwm = that.data.imageEwm;
 var imageZw = "/images/xcxewm.png";
 context.drawImage(path,size.w,size.h);
 context.drawImage(imageTx,size.w / 2 - 25,size.h * 0.02,size.w * 0.14,size.w * 0.14);
 context.drawImage(imageEwm,size.w / 2 - 60,size.h * 0.32,size.w * 0.33,size.w * 0.33);
 context.drawImage(imageZw,size.h * 0.7,size.w * 0.14);
 this.settextFir(context);
 this.settextSec(context);
 console.log(size.w,size.h)
 //繪製圖片
 context.draw();
 //將生成好的圖片儲存到本地，需要延遲一會，繪製期間耗時
 wx.showToast({
  title: '生成中...',icon: 'loading',duration: 2000
 });
 setTimeout(function () {
  wx.canvasToTempFilePath({
  canvasId: 'myCanvas',success: function (res) {
   var tempFilePath = res.tempFilePath;
   console.log(tempFilePath);
   that.setData({
   imagePath: tempFilePath,canvasHidden: false,});　　　　　　　　//將生成的圖片放入到《image》標籤裡
   var img = that.data.imagePath;
   wx.previewImage({
   current: img,// 當前顯示圖片的http連結
   urls: [img] // 需要預覽的圖片http連結列表
   })
  },fail: function (res) {
   console.log(res);
  }
  });
 },2000);
 },})

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

當然 ，如果有小可愛能解決這個問題的話，還望不吝指教~~~

總結

到此這篇關於微信小程式點選生成朋友圈分享圖的文章就介紹到這了,更多相關小程式 朋友圈分享圖內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！