快捷導(dǎo)航

教你用wxml2canvas將微信小程序頁面轉(zhuǎn)為圖片

更新時間：2022年11月26日 11:33:25 作者：兜兜轉(zhuǎn)轉(zhuǎn)的菜鳥

如果需要實現(xiàn)將小程序的頁面轉(zhuǎn)為圖片,第一步是要先把頁面轉(zhuǎn)為canvas,再將canvas轉(zhuǎn)為圖片,下面這篇文章主要給大家介紹了關(guān)于用wxml2canvas將微信小程序頁面轉(zhuǎn)為圖片的相關(guān)資料,需要的朋友可以參考下

最近有個微信小程序項目，需要將頁面轉(zhuǎn)為圖片。微信小程序提供的Api是wx.canvasToTempFilePath，這個方法是將畫布指定區(qū)域的內(nèi)容導(dǎo)出生成指定大小的圖片，但是我們是將頁面導(dǎo)出圖片，所以可以使用wxml2canvas解決

1、安裝wxml2canvas

npm init
npm install wxml2canvas --save --production

npm init 是npm初始化，這個時候根據(jù)編譯器終端一路回車最終會生成一個package.json文件

--production 是減少安裝與業(yè)務(wù)無關(guān)的包，減少項目的體積。

2、引入wxml2canvas

import Wxml2Canvas from 'wxml2canvas'

引入之后需要對微信開發(fā)者工具做出如下設(shè)置，否則引入之后會報錯

其次選擇微信開發(fā)者工具--》工具---》構(gòu)建npm

這個時候就不會報錯了

3、使用wxml2canvas

首先在需要生成圖片的wxml文件中創(chuàng)建canvas容器以及選擇生成圖片的范圍

<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>

每個需要生成圖片的內(nèi)容，需要注明類型。

text標(biāo)簽對應(yīng)的data-type='text'，image標(biāo)簽對應(yīng)的data-type=‘image’

data-text=‘需要展示的文本’ data-url='需要展示的圖片'

其他的data-type類型可以參考https://github.com/liudongyun1215/wxml2canvas

這個鏈接里面包含了許多配置項，就不一一列舉了，遇到問題的時候可以參考這個文檔

js文件的方法

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
        
        // 創(chuàng)建wxml2canvas對象
        let drawMyImage = new Wxml2Canvas({
          element: 'myCanvas', // canvas的id,
          obj: that, // 傳入當(dāng)前組件的this
          width: that.data.width * 2,
          height: that.data.height * 2,
          background: '#141415', // 生成圖片的背景色
          progress(percent) { // 進(jìn)度
            // console.log(percent);
          },
          finish(url) { // 生成的圖片
            wx.hideLoading()
            that.savePoster(url)
          },
          error(res) { // 失敗原因
            console.log(res);
            wx.hideLoading()
          }
        }, this);
        let data = {
            // 獲取wxml數(shù)據(jù)
            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: '需要您授權(quán)保存相冊',
                  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: '授權(quán)失敗，請稍后重新獲取',
                                icon: 'none',
                                duration: 1500
                            });
                        }
                      }
                    })
                  }
                })
              }
            }
          })
      },