/wxml2canvas

将wxml指定节点转换成canvas元素

Primary LanguageJavaScript

v1.3.0

优化图片清晰度控制。

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

v1.2.0

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

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

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