@yuu2lee4/wxml2canvas
v1.0.4
Published
将wxml指定节点转换成canvas元素
Downloads
1
Readme
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 | 否 | 输出的图片的像素密度,不建议传值,如果需要控制图片大小,可以适当减小 | | destRatio | Number | null | 否 | 输出的图片的长宽比 | | 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
- 支持更多文本样式
- 支持任意角度圆角