微信小程序wxml2canvas的使用以及遇到的一些问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序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;" />

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

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

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

    async generateCanvases(){
        wx.showLoading({
            title: '请稍候，该过程耗时较长...',
            mask: true
       })
        const that = this
        let base64List = []
        for (let i = 0; i < 9; i++) {
            let url = await that.startDraw(`travel${i+1}`,`.travel${i+1} .my_draw_canvas`)
            let base64 = await auth.downloadAndConvert(url)
            base64List.push(base64)
        }
        if(base64List.length === 9){
            //查看图片
            wx.previewImage({
              urls: base64List,
            })
        }
    },
    startDraw(containerName, drawClass) {
        let that = this
        return new Promise((resolve, reject) => {
            const query = wx.createSelectorQuery().in(that);
            query.select(`#${containerName}`).fields({
              size: true,
              scrollOffset: true
            }, data => {
              const width = data.width;
              const height = data.height;
              that.setData({
                canvasWidth: width,
                canvasHeight: height
              })
              const drawMyImage = new Wxml2Canvas.default({
                element: 'myCanvas',
                obj: that,
                width: that.data.canvasWidth * 2,
                height: that.data.canvasHeight * 2,
                background: '#fff',
                finish: url => {
                  resolve(url)
                },
                error: res => {
                  wx.hideLoading();
                }
              });
              drawMyImage.draw({
                list: [
                  {
                    type: 'wxml',
                    class: drawClass,
                    limit: `.${containerName}`,
                    x: 0,
                    y: 0
                  }
                ]
              }, that);
            }).exec();
        });
      }