❤
npm
Sign UpSign In

wxml2canvas

1.0.1 • Public • Published

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图片：

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

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

Readme

Keywords

Package Sidebar

Install

npm i wxml2canvas

Weekly Downloads

54

Version

1.0.1

License

ISC

Unpacked Size

154 kB

Total Files

20

Last publish

Collaborators

  • wg-front
Try on RunKit
Report malware