wxml2canvas 小程序元素生成图片

1、下载

小程序内部要安装wxml2canvas
github地址：https://github.com/liudongyun1215/wxml2canvas

1.1、初始化package.json, 下面两种代码都可以初始化package.json

npm init
yarn init

1.2、安装wxml2canvas

yarn add wxml2canvas
npm i wxml2canvas

1.3、构建npm

2、使用

2.1、在js页面引入

import Wxml2Canvas from 'wxml2canvas'; 

2.2、在js中使用， 需要在使用的方法中引用drawCanvas

drawCanvas: function () {
        wx.showLoading({
           title: '加载中'
        })
        const that = this
        const query = wx.createSelectorQuery().in(this);
        query.select('#answer-canvas').fields({ //answer-canvas要绘制的canvas的id
            size: true,
            scrollOffset: true
        }, data => {
            let width = data.width;
            let height = data.height;
            console.log(width, height);
            that.setData({
                width: width,
                height: height
            })
            setTimeout(() => {
                that.draw()
            }, 1500);
       }).exec()
    },
    draw(){
        let that = this
        
        //创建wxml2canvas对象
        let drawImage = new Wxml2Canvas({
          element: 'answerCanvas', // canvas节点的id,
          obj: that, // 在组件中使用时，需要传入当前组件的this
          width: 696, // 宽 自定义
          height: 522, // 高 自定义
          background: 'transparent', // 默认背景色 设置背景色
          progress(percent) { // 绘制进度
            // console.log(percent);
          },
          finish(url) {
            console.log("创建的图片", url);
            wx.hideLoading()
            that.setData({
                imgUrl: url
            })
          },
          error(res) {
            console.log(res);
            // uni.hideLoading()
            // 画失败的原因
          }
        }, this);
        let data = {
          //直接获取wxml数据
          list: [{
              type: 'wxml',
              class: '.answer_canvas .answer_draw_canvas',  // answer_canvas这边为要绘制的wxml元素跟元素类名， answer_draw_canvas要绘制的元素的类名（所有要绘制的元素都要添加该类名）
              limit: '.answer_canvas', // 这边为要绘制的wxml元素跟元素类名,最外面的元素
              x: 0,
              y: 0
            } ]
        }
          //传入数据，画制canvas图片
        drawImage.draw(data, this);
    }

2.3、xwml中添加元素

canvas元素添加

<canvas canvas-id="answerCanvas" class="answerCanvas"></canvas>

生成后的图片展示

<image class="canvas_img" src="{{imgUrl}}" wx:if="{{imgUrl}}" show-menu-by-longpress="{{true}}"></image>

要生成图片的html元素

 <view class="canvasImg answer_canvas " id="answer-canvas" wx:if="{{!imgUrl}}">
            <view class="inner answer_draw_canvas"  data-type="background-image">
                <image class="left_icon answer_draw_canvas" src="/images/htsi/left_icon.png" data-type="image" data-url="/images/htsi/left_icon.png"></image>
                <view class="name answer_draw_canvas" data-type="text" data-text="姓名：XXX">姓名：XXX</view>
                <view class="desc answer_draw_canvas" data-type="text" data-text="这边是要绘制的文字">这边是要绘制的文字</view>
                <view class="desc answer_draw_canvas" data-type="text" data-text="要绘制的文字描述">要绘制的文字描述</view>
                <view class="bottom answer_draw_canvas">
                    <image src="https://img0.baidu.com/it/u=753216696,2669208484&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657299600&t=c358bbe8685325dfa573277881d24cea" alt="" class="mini answer_draw_canvas" data-type="image" data-url='https://img0.baidu.com/it/u=753216696,2669208484&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1657299600&t=c358bbe8685325dfa573277881d24cea'/>
                    <view class="left answer_draw_canvas">
                        <text class="company answer_draw_canvas" data-type="text" data-text="要绘制的文字">要绘制的文字</text>
                        <text class="time answer_draw_canvas" data-type="text" data-text="2022年03月05日">2022年03月05日</text>
                    </view>
                </view>
            </view>
           
        </view>

3、要添加元素的格式

3.1、背景图片

元素要添加背景图片的时候需要添加data-type=“background-image”

<view class="inner answer_draw_canvas"  data-type="background-image"></view>

3.2、图片

元素要是image的时候要添加data-type=“image” data-url=‘图片地址’， 这边图片地址要在小程序配置白名单，背景图片同下

3.3、文字绘制

文字绘制需要添加data-type=“text” data-text=“要绘制的文字”

<text class="time answer_draw_canvas" data-type="text" data-text="要绘制的文字">要绘制的文字</text>

4、遇到的问题

4.1、边框不展示

要看一下是否设置了box-sizing: border-box;如果css设置了该属性会导致边框不出现

4.2、图片

图片本地的正常引用，如果是链接的一定要保证配置白名单，详情见3.2，否则生成会一直加载中