小程序畫布生成海報，保存到本地

生成自己的專屬海報保存本地後分享

WXML

<!-- 點擊出現彈窗 -->
<view bindtap="formSubmit">分享二維碼</view>
<!-- 分享海報 -->
    <view class='imagePathBox' hidden="{{maskHidden == false}}">
      <view class="imageCont">
        <view class="shareTit">
          <view>保存圖片，發給你的好友或分享到朋友圈！</view>
        </view>
        <!-- 畫布生成的圖片 -->
        <image src="{{imagePath}}" class='shengcheng' mode="widthFix"></image>
        <view class="shareBtn">
          <button bindtap="quxiao">取消</button>
          <button class='baocun' bindtap='baocun'>保存圖片</button>
        </view>
      </view>
    </view>
    <view hidden="{{maskHidden == false}}" class="mask"></view>
    <view class="canvas-box">
    <!-- 畫布實際尺寸 -->
      <canvas style="width:960px;height:540px;position:fixed;top:9999px" canvas-id="mycanvas" />
    </view>
    <!-- end -->

WXSS

.imagePathBox{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;text-align: center;
}
.imageCont{position: absolute;top: 10%;text-align: center;left: 0;right: 0;}
.shengcheng{
  width: 90%;margin: 60rpx auto;
}
.shareBtn{width: 80%;display: flex;margin: 0 auto 40rpx auto;}
.shareBtn button{display: block;
  width: 40%;
  height: 80rpx;
  padding: 0;
  line-height: 80rpx;
  text-align: center;
  font-size: 32rpx;
  border-radius: 40rpx;}
.baocun{
  background: #ffab50;
  color: #fff;
}
button[class="baocun"]::after{
  border: 0;
}

JS

data: {
    maskHidden: false,//彈窗
  },
  //將canvas轉換爲圖片保存到本地，然後將圖片路徑傳給image圖片的src
  createNewImg: function() {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.setStrokeStyle('#00bdf5');
    // 繪製背景圖
    context.drawImage("../../images/bg.png", 0, 0, 960, 540);
    context.stroke();
    var codeUrl = wx.getStorageSync('codeUrl');
    // 繪製二維碼
    var path = codeUrl;//二維碼路徑
    wx.getImageInfo({
      src: path,
      success: function(res) {
        let code = res.path;
        context.drawImage(code, 284, 333, 160, 160);
        context.stroke();
        context.draw(false, function() {
        //將網絡圖片下載到本地並獲取本地路徑
          wx.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function(res) {
              var tempFilePath = res.tempFilePath;
              that.setData({
                imagePath: tempFilePath,
                canvasHidden: true
              });
            },
            fail: function(res) {
              console.log(res);
            }
          });

        });
      },

    })
  },
  //點擊保存到相冊
  baocun: function() {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '圖片已保存到相冊，趕緊曬一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function(res) {
            if (res.confirm) {
              console.log('用戶點擊確定');
              /* 該隱藏的隱藏 */
              that.setData({
                maskHidden: false
              })
            }
          },
          fail: function(res) {
            that.setData({
              maskHidden: false
            })
          }
        })
      }
    })
  },
  //顯示彈窗
  formSubmit: function(e) {
    var that = this;
    wx.showToast({
      title: '加載中...',
      icon: 'loading',
      duration: 4000
    });
    setTimeout(function() {
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden: true
      });
    }, 1000)
  },
  // 關閉彈窗
  quxiao: function(e) {
    var that = this;
    this.setData({
      maskHidden: false
    });
  }