wxml2canvas

v1.3.0

优化图片清晰度控制。

new Wxml2Canvas时增加destZoom属性，默认3，(建议取值范围2-5)，取消destWidth，destHeight属性的作用。destZoom值越大，图片越大，建议不传，使用小程序默认值。

v1.2.0

支持base64图片的转换和绘制，基于sdk1.9.9+，将图片存储到本地再绘制。 使用时src或background-image传入base64编码的值，然后声明data-base64="1"。下图绿框部分为base64图片：

v1.1.0

支持图片的缩放和裁剪，使用时声明如：data-mode="aspectFill"，mode的13种模式完全支持。效果如下：

注意：目前开发者工具图片裁剪显示有bug，以真机效果为准。

Wml2Canvas 介绍

特性

• 配置数据绘制基础图形、文字
• wxml元素转换成canvas元素

示例

直接在小程序开发工具里运行项目，可看到两种使用方式。真机预览时，建议填入有权限的appid，然后打开调试，否则无法看到网络图片。

使用方式

安装：

    npm install wxml2canvas

wxml:

<view class="share__canvas share__canvas1">
    <view class="share__canvas1-text draw_canvas" 
        data-type="text" data-text="这是一段无边距文字">
        这是一段无边距文字
    </view>
</view>
<canvas canvas-id="canvas1" class="share__canvas"></canvas>

js:

import Wxml2Canvas from 'wxml2canvas'; // 根据具体路径修改，node_modules会被忽略
Page({
    drawImage1 () {
        let self = this;
        this.drawImage1 = new Wxml2Canvas({
            width: 340, // 宽， 以iphone6为基准，传具体数值，其他机型自动适配
            height: 210, // 高
            element: 'canvas1', 
            background: '#f0f0f0',
            progress (percent) {
            },
            finish(url) {
                let imgs = self.data.imgs;
                imgs.push(url);

                self.setData({
                    imgs
                })
            },
            error (res) {
            }
        });

        let data = {
            list: [{
                type: 'wxml',
                class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素
                limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
                x: 0,
                y: 0
            }]
        }

        this.drawImage1.draw(data);
    },
})

属性

初始化属性

new Wxml2Canvas(options) 时传入的options属性如下：

属性名	类型	默认值	是否必填	说明
element	String	''	是	画布的id
width	Number	0	是	画布的宽，以iphone6的375为基准，其他机型按比例自动设置实际宽度
height	Number	0	是	画布的高，同上
destZoom	Number	3	否	输出的图片的像素密度，不建议传值，如果需要控制图片大小，可以适当减小
zoom	Number	1	否	画布整体缩放比例，不建议传值，会覆盖各种机型的适配
translateX	Number	0	否	画布整体横向位移
translateY	Number	0	否	画布整体纵向位移
height	Number	height * 2	否	输出的图片的高度
background	String	#ffffff	否	画布的整体背景色
gradientBackground	Object	null	否	画布整体的渐变背景色
finish	Function	null	否	绘制成功后回调函数, 返回值url，绘制图片的本地路径
progress	Function	null	否	绘制进度，返回值percent，0-100
error	Function	null	否	绘制失败后回调函数，返回值object，包含具体原因

绘制失败的原因如下：

错误码	原因	说明
errcode	errmsg	e
1000	save canvas error	保存图片失败
1001	download pic error	预下载图片失败
1002	drawRect error	绘制矩形失败
1003	drawImage error	绘制图片失败
1004	drawText error	绘制文本失败
1005	drawCircle error	绘制圆形图片失败
1006	drawCircleImage error	绘制圆形失败
1007	drawLine error	绘制线条失败
1008	drawWxml error	绘制Wxml失败
1009	drawWxml preLoadImage error	预下载Wxml图片失败

数据配置方式支持的格式

代码示例：

let data = {
    list: [{
        type: 'rect',
        x: 10,
        y: 10,
        style: {
            width: 150,
            height: 80,
            fill: '#3762ab',
            border: '10px solid #aaaaaa',
        }
    }
}

上述是一个矩形的创建方式，可看代码里的示例。下面是支持的属性：

矩形

属性	类型	是否必填	说明
type	String	是	'rect'，声明为绘制矩形
x	Number	是	坐标x
y	Number	是	坐标y
style
width	Number	是	宽
height	Number	是	高
fill	String 或 Object	否	填充颜色，支持渐变色
border	String	否	边框，需要严格遵循 '10px dashed #540821' 格式
boxShadow	String	否	阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dash	Array	否	虚线边框的间距和偏移

圆形

属性	类型	是否必填	说明
type	String	是	'circle'，声明为绘制圆形
x	Number	是	坐标x
y	Number	是	坐标y
style
r	Number	是	半径
fill	String 或 Object	否	填充颜色，支持渐变色
border	String	否	边框，需要严格遵循 '10px dashed #540821' 格式
boxShadow	String	否	阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dash	Array	否	虚线边框的间距和偏移

线条

属性	类型	是否必填	说明
type	String	是	'line'，声明为绘制线条
x	Number	是	起始坐标x
y	Number	是	起始坐标y
x2	Number	是	终止坐标x
y2	Number	是	终止坐标y
style
width	Number	是	线条宽度
stroke	String 或 Object	否	填充颜色，支持渐变色
boxShadow	String	否	阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dash	Array	否	有此属性则绘制虚线，传入值为虚线边框的间距和偏移

图片

属性	类型	是否必填	说明
type	String	是	'image'，声明为绘制图片
x	Number	是	坐标x
y	Number	是	坐标y
url	String	是	图片链接，支持 http/https 及本地图片，域名需要在mp平台加入白名单
style
width	Number	是	宽
height	Number	是	高
border	String	否	边框，需要严格遵循 '10px dashed #540821' 格式
boxShadow	String	否	阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dash	Array	否	虚线边框的间距和偏移

圆形图片

属性	类型	是否必填	说明
type	String	是	'radius-image'，声明为绘制圆形图片
x	Number	是	坐标x
y	Number	是	坐标y
url	String	是	图片链接，支持 http/https 及本地图片，域名需要在mp平台加入白名单
style
r	Number	是	半径
border	String	否	边框，需要严格遵循 '10px dashed #540821' 格式
boxShadow	String	否	阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dash	Array	否	虚线边框的间距和偏移

文本

属性	类型	是否必填	说明
type	String	是	'text'，声明为绘制文本
x	Number	是	坐标x
y	Number	是	坐标y
text	String	否	文本内容
style
width	Number	否	文本最大宽，超过则换行
height	Number	否	文本高度
color	String	否	字体颜色
fontSize	Number	否	字体大小，默认14
fontFamily	String	否	字体样式
lineHeight	Number	否	字体行高，默认14 * 1.2
fontWeight	String	否	字体粗细，默认normal
lineClamp	Number	否	文字的最大行数，超出则用 ... 截取
whiteSpace	String	否	是否换行，默认wrap，如果传入nowrap，则不换行
textAlign	String	否	文本的水平对齐方式，默认left
border	String	否	边框，需要严格遵循 '10px dashed #540821' 格式
background	String	否	字体背景色
boxShadow	String	否	阴影，需要严格遵循 '10 20 20 rgba(0, 0, 0, 0.4)' 格式
dash	Array	否	虚线边框的间距和偏移
padding	String	否	内边距，'10 10 10 10', 与css有区别，依次为左、上、右、下，可以不带单位

此外，上述所有的元素都可以增加 delay:true 属性，来实现延迟绘制。

wxml转换的方式

如上面的使用示例，声明type为wxml时，会查询绘制元素节点的样式并绘制。下表是对应属性：

属性	类型	是否必填	说明
type	String	是	'wxml'，声明转换wxml
x	Number	是	坐标x，用于修正位置
y	Number	是	坐标y，用于修正位置
class	String	是	待查询绘制的节点类名，会查询所有相同的类名
limit	String	是	限定节点的外围容器，在取坐标时，取与它的相对位置

目前支持的wxml类型如下，需要声明在节点上：

图片

属性	类型	是否必填	说明
data-type	String	是	'image'，矩形图片
data-url	String	是	图片链接
data-left	Number	否	修正横坐标位置
data-top	Number	否	修正纵坐标位置

圆形图片

属性	类型	是否必填	说明
data-type	String	是	'radius-image'，圆形图片
data-url	String	是	图片链接
data-left	Number	否	修正横坐标位置
data-top	Number	否	修正纵坐标位置

背景图片

属性	类型	是否必填	说明
data-type	String	是	'background-image'，背景图片
data-left	Number	否	修正横坐标位置
data-top	Number	否	修正纵坐标位置

文本

属性	类型	是否必填	说明
data-type	String	是	'text'，文本
data-text	String	是	文本内容
data-left	Number	否	修正横坐标位置
data-top	Number	否	修正纵坐标位置
data-padding	String	否	内边距，与style叠加
data-background	String	否	背景色

行内文本

属性	类型	是否必填	说明
data-type	String	是	'inline-text'，行内文本
data-text	String	是	文本内容
data-left	Number	否	修正横坐标位置
data-top	Number	否	修正纵坐标位置
data-padding	String	否	内边距，与style叠加
data-background	String	否	背景色

行内图片

属性	类型	是否必填	说明
data-type	String	是	'inline-image'，矩形图片
data-url	String	是	图片链接
data-left	Number	否	修正横坐标位置
data-top	Number	否	修正纵坐标位置

行内文本与图片有特殊处理逻辑，当top值相同时，按照从左到右顺序排列，可能会与展现有差异。

此外，上述所有的元素都可以增加 delay:Number 属性，来实现延迟绘制, number范围：1-100，间接实现层级控制。

Todo

• 支持更多文本样式
• 支持任意角度圆角