wxml2canvas爬坑之路

我是木木呀發表於2023-03-14
XMLCanvas

效果圖：

 

 

前提：

公司要求生成一分報告並轉為圖片並儲存，之前用canvas畫過，但這次是在不想用canvas一點點畫了，再往上找了n久，爬了n多坑，終於搞出來了

 

外掛：

wxml2canvas

 

一：下載外掛

npm install wxml2canvas

二：構建npm

微信開發者工具：  工具 --> 構建npm

 

三：使用

 

import Wxml2Canvas from 'wxml2canvas'

 

好了，坑開始了！！！！！！！！！！！！

 

坑一：引入一直報錯

解決方法

重新下載了好幾次wxml2canvas，又清了快取n次

總結：微信開發者工具太辣雞了

 

坑二：文字不換行

解決方法：

 data-type="inline-text"

text標籤的 data-type 由 text 修改為 inline-text

 

坑三：文字按整個canvas的寬度來換行，超過的部位還被裁了

 

 

 解決方法：手動換行

計算這裡一行最多可以放幾個文字，然後把這一段文字分割成幾行，最後迴圈遍歷顯示

<view class="function">
     <text class="my_draw_canvas" wx:for="{{instructionTextList}}" wx:key="index" data-type="inline-text" data-text="{{item}}">
                      {{item}}
      </text>
       <!-- <text class="my_draw_canvas" data-type="inline-text" data-text="測試測試測測試測試測試測試測試測試測試測試測試測試測試測試試測試">
                      測試測試測測試測試測試測試測試測試測試測試測試測試測試測試試測試
         </text> -->
</view>

坑四：最後的圖片不顯示wxss中寫的border程式碼

 

 解決方法:

let drawMyImage = new Wxml2Canvas({
      element: 'myCanvas', // canvas的id,
      obj: that, // 傳入當前元件的this
      options: {class: ".exc-c",limit: ".limit-r",},
      width: that.data.width * 3,
      height: that.data.height * 3,
      // width: 794,
      // height: 1123,
      background: '#ffffff', // 生成圖片的背景色
      progress(percent) { // 進度
        // console.log(percent);
      },
      finish(url) { // 生成的圖片
        console.log('url',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,
          },
          { //繪製橫線  logo下面
            type: 'line', x: 10, y: 50,x2:760,y2:50,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          { // 車牌下面
            type: 'line', x: 10, y: 178,x2:760,y2:178,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          {// 檢測部位 下面
            type: 'line', x: 170, y: 208,x2:760,y2:208,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          {// 功能/作用 下面
            type: 'line', x: 10, y: 318,x2:760,y2:318,
            style: {
              width: 1,
              stroke: '#000'
            }
          },
          {// 正常狀態 下面
            type: 'line', x: 10, y: 354,x2:760,y2:354,
            style: {
              width: 1,
              stroke: '#000'
            }
          },         // {// 畫豎線  左邊
          //   type: 'line', x: 10, y: 178,x2:10,y2:that.data.height-186,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },
          // {// 畫豎線  右邊
          //   type: 'line', x: 760, y: 178,x2:760,y2:that.data.height-186,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },          
          // {// 車牌照片  右邊
          //   type: 'line', x: 170, y: 178,x2:170,y2:318,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },        
          // {// 檢測部位  右邊
          //   type: 'line', x: 250, y: 178,x2:250,y2:318,
          //   style: {
          //     width: 1,
          //     stroke: '#000'
          //   }
          // },


      ]
    }
    // 繪製canvas
    drawMyImage.draw(data, this);

坑五：不同型號手機顯示錯位

好不容易填了一下第四個坑，但是螢幕越大的手機，線條往右下方偏移越嚴重

希望的樣式：（12pro）

 

 (13pro)                                                                                                         (ipad)

                 

 

 

以上我感覺是不能用  type: 'line'  一條條地畫了，搞了整整兩三天，最終放棄

最後解決方法：在需要畫線的地方，插入一個view當做一條線

<view class="my_draw_canvas" data-type="text" style="width: 80px;height: 1px;background: rgba(0, 0, 0, 1);"></view>
<view class="my_draw_canvas" data-type="text" style="width: 1px;height: 1000px;background: rgba(0, 0, 0, 1);"></view>

以上，線條可以在不同型號、版本的手機上完美呈現

 

然而，坑依然沒有結束！！！！！！！！！！！！！

 

坑六：下載後圖片不顯示

 

 因為寫靜態頁面的時候都是引入本地的圖片，所以點選匯出的時候是完全沒有問題的，但是換成了後臺動態資料，要根據地址去顯示伺服器上的圖片的時候，就開始作妖了！！！！！

 

解決方法：先把圖片下載至本地

wx.downloadFile({
      url: `圖片地址`,
      success: function(res){
        let leftLogo = res.tempFilePath
        if(res.dataLength > 0){
          that.setData({
            leftLogo:leftLogo,
          })
        }else{
          that.setData({
            leftLogo:"",
          })
        }
        
      },
      fail: function (error) {
        wx.showToast({
          title: "預下載左側logo失敗",
          icon: 'none'
        })
      }
    })
<image class="my_draw_canvas" src="{{leftLogo}}" data-type="image" data-url="{{leftLogo}}"></image>

 

以上就是我畫圖的所有心累里程

後續還有兩個bug沒解決：

bug一：微信開發者工具中匯出圖片有問題，但手機上沒問題

（電腦）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　（手機）

                                         

 

 

bug二：手機上有問題，電腦上沒有

　　　　　　　　（電腦）　　　　　　　　　　　　　　　　　　　　　　　　　　(手機)

     

 

 

 

 

後續有解決方法了再補充

 ------2023-3-14

 

相關文章