元旦將至，接到上級要求小程式生成元旦賀卡分享。（要求使用者自主填寫祝福語標題）

個人思路：選用元旦背景將使用者填寫內容畫布生成。儲存為圖片海報
一下為程式碼:
wxml:











<view @click=“formSubmit”>
生成賀卡


<!--

-->

<image :src=“imagePath” @click=“previewImage” class=‘shengcheng’>
<button class=‘baocun’ @click=‘baocun’>重新生成






js:
//生成畫布
createNewImg() {
var that = this;
var context = wx.createCanvasContext(‘mycanvas’);
context.setFillStyle("#fff")
context.fillRect(0, 100, 375, 567)
var path = “

https://always520.cn/images/ydbj2.png”;
//將模板圖片繪製到canvas,在開發工具中drawImage()函式有問題，不顯示圖片
//不知道是什麼原因，手機環境能正常顯示
context.drawImage(that.mysrc, 0,100, 375,567);
//不知道是什麼原因，手機環境能正常顯示
context.save();
// 儲存當前context的狀態
//console.log(this.count, “a”, this.title)
//var title = this.title;
//繪製標題
context.setFontSize(24);
context.setFillStyle(’#333333’);
context.setTextAlign(‘center’);

  context.fillText(this.title, 185, 260);
  context.stroke();
  //繪製祝福語
  var text  = this.count;
  var chr = text.split("");
  var temp = "";
  var row = [];
  for (var a = 0; a < chr.length; a++) {
    if (context.measureText(temp).width < 300) {
      temp += chr[a];
    }
    else {
      a--; //這裡添加了a-- 是為了防止字元丟失，效果圖中有對比
      row.push(temp);
      temp = "";
    }
  }
  row.push(temp);
  console.log("a0", temp)
  context.setFontSize(18);
  context.setFillStyle('#333333');
  context.setTextAlign('center');
  for (var b = 0; b < row.length; b++) {
    context.fillText(row[b], 195, 300 + b * 30);
  }
  context.stroke();
  //繪製驗證碼背景
  //context.drawImage(path3, 48, 390, 280, 84);
  //繪製右下角掃碼提示語
  //context.drawImage(path5, 248, 578, 90, 25);
  context.setFontSize(18);
  context.setFillStyle('red');
  context.setTextAlign('center');
  context.fillText("長按儲存或分享", 195, 440);
  
  context.setFontSize(18);
  context.setFillStyle('red');
  context.setTextAlign('center');
  context.fillText("長按識別二維碼，快點來生", 195, 465);

  context.setFontSize(18);
  context.setFillStyle('red');
  context.setTextAlign('center');
  context.fillText("成自己獨特的元旦賀卡吧！", 195, 485);
  context.draw();
  
  //將生成好的圖片儲存到本地，需要延遲一會，繪製期間耗時
  setTimeout(function () {
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: (res) => {
        var tempFilePath = res.tempFilePath;
       
        that.imagePath = tempFilePath,
          that.imglist.push(tempFilePath),
          that.xs = false;
        this.canvasHidden=true
      },
      fail(res) {
        console.log(res);
      }
    });
  }, 200)
 

//點選返回重新生成
baocun() {
var that = this;
that.maskHidden = true;
that.xs = true;
//儲存圖片
//wx.saveImageToPhotosAlbum({
// filePath: this.imagePath,
// success(res) {
// wx.showModal({
// content: ‘圖片已儲存到相簿，趕緊晒一下吧~’,
// showCancel: false,
// confirmText: ‘好的’,
// confirmColor: ‘#333’,
// success: function (res) {
// if (res.confirm) {
// that.maskHidden = true
// }
// }, fail: function (res) {
// console.log(11111)
// }
// })
// }
//})
},
//預覽
previewImage (e) {
wx.previewImage({
current: this.imglist[0], // 當前顯示圖片的http連結
urls: this.imglist // 需要預覽的圖片http連結列表
})
},
getInputText(inputText) {
console.log(inputText.detail.value)

},

wxss:
page{
height: 100%;
min-height: 100%;

}
.imagePathBox {
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.shengcheng {
width: 80%;
height: 80%;
position: fixed;
top: 50rpx;
left: 50%;
margin-left: -40%;
z-index: 10;
}
.baocun {
display: block;
width: 80%;
height: 80rpx;
padding: 0;
line-height: 80rpx;
text-align: center;
position: fixed;
bottom: 50rpx;
left: 10%;
background: #ff6f3f;
color: #fff;
font-size: 32rpx;
border-radius: 44rpx;
}

button[class=“baocun”]::after {
border: 0;
}
借鑑部落格連結
https://www.cnblogs.com/zzgyq/p/8882995.html