教你用wxml2canvas將微信小程式頁面轉為圖片

npm init
npm install wxml2canvas --save --production

import Wxml2Canvas from 'wxml2canvas'

<canvas canvas-id="myCanvas" class="myCanvas"></canvas>
<view id="my-canvas" class="my_canvas>
    <view class="header my_draw_canvas">
        <image class="headerImg my_draw_canvas" src="{{order.headerImg}}" data-type="image" data-url="{{order.headerImg}}"></image>
        <text class="headerTitle my_draw_canvas" data-type="text" data-text="您的訂單詳情">您的訂單詳情</text>
    </view>
</view>

drawMyCanvas() {
        wx.showLoading()
        const that = this
        const query = wx.createSelectorQuery().in(this);
        query.select('#my-canvas').fields({ // 選擇需要生成canvas的範圍
            size: true,
            scrollOffset: true
        }, data => {
            let width = data.width;
            let height = data.height;
            that.setData({
                width,
                height
            })
            setTimeout(() => {
                that.startDraw()
            }, 1500);
       }).exec()
},
startDraw() {
        let that = this
        
        // 建立wxml2canvas物件
        let drawMyImage = new Wxml2Canvas({
          element: 'myCanvas', // canvas的id,
          obj: that, // 傳入當前元件的this
          width: that.data.width * 2,
          height: that.data.height * 2,
          background: '#141415', // 生成圖片的背景色
          progress(percent) { // 進度
            // console.log(percent);
          },
          finish(url) { // 生成的圖片
            wx.hideLoading()
            that.savePoster(url)
          },
          error(res) { // 失敗原因
            console.log(res);
            wx.hideLoading()
          }
        }, this);
        let data = {
            // 獲取wxml資料
            list: [{
                type: 'wxml',
                class: '.my_canvas .my_draw_canvas',  // my_canvas要繪製的wxml元素根類名， my_draw_canvas單個元素的類名（所有要繪製的單個元素都要新增該類名）
                limit: '.my_canvas', // 要繪製的wxml元素根類名
                x: 0,
                y: 0
            }]
        }
        // 繪製canvas
        drawMyImage.draw(data, this);
    },
savePoster() {
        const that = this
        wx.saveImageToPhotosAlbum({
            filePath: that.data.imgUrl,
            success: function() {
                wx.showToast({
                    title: '儲存成功',
                    icon: 'none',
                    duration: 1500
                });
            },
            fail(err) {
              if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                wx.showModal({
                  title: '提示',
                  content: '需要您授權儲存相簿',
                  showCancel: false,
                  success: modalSuccess => {
                    wx.openSetting({
                      success(settingdata) {
                        if (settingdata.authSetting['scope.writePhotosAlbum']) {
                            wx.saveImageToPhotosAlbum({
                                filePath: that.data.imgUrl,
                                success: function () {
                                  wx.showToast({
                                    title: '儲存成功',
                                    icon: 'success',
                                    duration: 2000
                                  })
                                },
                            })
                        } else {
                            wx.showToast({
                                title: '授權失敗，請稍後重新獲取',
                                icon: 'none',
                                duration: 1500
                            });
                        }
                      }
                    })
                  }
                })
              }
            }
          })
      },