微信小程序wxml2canvas的使用以和遇到的问题

最近入坑了的一个laji（拼音）项目，各种天花乱坠、异想天开的功能，给我整头大了（菜是原罪）。具体功能呢就是需要将页面元素转为图片，然后将图片和音乐制成视频（搞不了根本搞不了，丢给后端兄弟了），当然了，不能一口吃成一个大胖子，更何况嘴都还没张开，然后就开始面向百度编程找到其他一些解决方案，但是还是入坑了wxml2canvas。

参考以下：

Wxml2Canvas -- 快速生成小程序分享图通用方案 | 微信开放社区README.md · 疯狂的世界/wxml2canvas - Gitee.com

一、安装插件

找到项目位置，打开终端（cmd命令窗口），命令行输入npm init,然后就是回车回车...，完成之后再执行以下命令

npm install wxml2canvas

安装完成要记得构建npm：工具–>构建npm

第二步 引入

const Wxml2Canvas = require('Wxml2Canvas ')

或者

import Wxml2Canvas from 'wxml2canvas'

第三步 使用

首先你需要在你的页面上创建一个canvas以及需要生成图片的内容，例如我的：

<canvas canvas-id="myCanvas" style="width: {{canvasWidth}}px; height:{{canvasHeight}}px;position: absolute; left: -9999px;" />

1.  
       <view class="travel2 my_draw_canvas" data-type="text" id="travel2">
2.  
           <view class="photo-center my_draw_canvas" data-type="text" data-background="#fff">
3.  
               <image src="../../static/travel/photo7.png" class="photo-image7 my_draw_canvas" data-type="image" data-url="../../static/travel/photo7.png"  />
4.  
               <textarea 
5.  
                   data-type="text" data-text="{{descList[1].description}}"
6.  
                   class="input-border-none desc-bottom-left my_draw_canvas" 
7.  
                   placeholder="请输入你最想留下的" 
8.  
                   value="{{descList[1].description}}"
9.  
                   data-index="1"
10.  
                    bindblur="remarkBlurAction"
11.  
                    bindconfirm="remarkConfirm">
12.  
                </textarea>
13.  
            </view>
14.  
        </view>

可以看到我们需要为要在canvas上显示在图片的内容添加data-type属性，如果内容为图片则添加data-type="image"，为文本则添加data-type="text"，其次就是图片的地址data-url以及显示的文字data-text。

通过事件就可以获取到我们要的图片了

1.  
   async generateCanvases(){
2.  
   wx.showLoading({
3.  
   title: '请稍候，该过程耗时较长...',
4.  
   mask: true
5.  
   })
6.  
   const that = this
7.  
   let base64List = []
8.  
   for (let i = 0; i < 9; i ) {
9.  
   let url = await that.startDraw(`travel${i 1}`,`.travel${i 1} .my_draw_canvas`)
10.  
    let base64 = await auth.downloadAndConvert(url)
11.  
    base64List.push(base64)
12.  
    }
13.  
    if(base64List.length === 9){
14.  
    //查看图片
15.  
    wx.previewImage({
16.  
    urls: base64List,
17.  
    })
18.  
    }
19.  
    },
20.  
    startDraw(containerName, drawClass) {
21.  
    let that = this
22.  
    return new Promise((resolve, reject) => {
23.  
    const query = wx.createSelectorQuery().in(that);
24.  
    query.select(`#${containerName}`).fields({
25.  
    size: true,
26.  
    scrollOffset: true
27.  
    }, data => {
28.  
    const width = data.width;
29.  
    const height = data.height;
30.  
    that.setData({
31.  
    canvasWidth: width,
32.  
    canvasHeight: height
33.  
    })
34.  
    const drawMyImage = new Wxml2Canvas.default({
35.  
    element: 'myCanvas',
36.  
    obj: that,
37.  
    width: that.data.canvasWidth * 2,
38.  
    height: that.data.canvasHeight * 2,
39.  
    background: '#fff',
40.  
    finish: url => {
41.  
    resolve(url)
42.  
    },
43.  
    error: res => {
44.  
    wx.hideLoading();
45.  
    }
46.  
    });
47.  
    drawMyImage.draw({
48.  
    list: [
49.  
    {
50.  
    type: 'wxml',
51.  
    class: drawClass,
52.  
    limit: `.${containerName}`,
53.  
    x: 0,
54.  
    y: 0
55.  
    }
56.  
    ]
57.  
    }, that);
58.  
    }).exec();
59.  
    });
60.  
    }

四、遇到的一些问题

1、引入Wxml2Canvas 之后一直报错TypeError: wxml2canvas.default is not a constructor

解决：将new wxml2canvas({...})改为Wxml2Canvas.default({...})即可

2、Wxml2Canvas不支持设置border-radius、transform、writing-mode等等，目前没找到解决方案

3、Wxml2Canvas不支持设置z-index

解决：可使用data-delay属性，来实现延迟绘制（值越大则越晚绘制）

五、结束

该文章只作为自己遇到问题的记录，主要还是自己菜的问题，就这样，希望它能帮解决遇到相同的问题

这篇好文章是转载于：学新通技术网