crazy-poster-taro
Version:
a wxml2canvas tool for taro.
95 lines (71 loc) • 3.12 kB
Markdown
一个基于 Taro 的海报生成工具，支持将 WXML 元素渲染为 Canvas，并导出图片，既见即所得！👍。
- 🖼️ 支持多种元素类型（图片、文本、矩形、线条等）的绘制
- 🎨 支持圆角、渐变、边框等样式
- ⚡ 自动图片预加载
- 🔄 支持自定义回调（完成、失败）
```bash
npm install crazy-poster-taro
```
或直接复制 `render.js` 到你的项目中。
```javascript
import wxml2Canvas from 'crazy-poster-taro';
const poster = new wxml2Canvas({
draw: '.draw-class', // 需要绘制的元素选择器
limit: '.limit-class', // 限制区域选择器
canvas: 'canvasId', // canvasId
scope: this, // 作用域
finish: (imgPath) => { // 绘制完成回调
console.log('生成图片路径:', imgPath);
},
fail: (err) => { // 失败回调
console.error('绘制失败:', err);
}
});
poster.draw();
```
```jsx
// 如果你希望某个元素被绘制，在标签类名上添加“_draw”
// ⚠️注意：图片和文本需要添加data-url、data-text属性
// 基本上利用这三种标签就能构建你的海报
// ⚠️注意：图片仅支持在线图片
<View class="_draw"></View>
<Image data-url="***" class="_draw"></Image>
<Text data-text="***" class="_draw"></Text>
// 如果你要绘制的元素上有边框，这样使用就行
<View data-type="line" class="_draw"></View>
// 你可以绘制任何矩形，只要带上data-type="rect"
<View data-type="rect" class="_draw"></View>
// 如果你只想用View进行布局而不参与绘制，既不用加上data-type="rect"，也不用添加_draw类名
<View></View>
// 如果你希望支持你的文本自动换行，请这样使用
<View data-type="text-struct">
<Text data-text="这里的文本内容可能会很多，乃至在布局上会换行，没关系，这样使用就行"></Text>
</View>
// 整体实际结构
// 最外层容器
<View class="_limit">
{/* 在这里面随意你布局 */}
<View class="_draw"></View>
<Image data-url="***" class="_draw"></Image>
<Text data-text="***" class="_draw"></Text>
</View>
```
| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
|---------------------|------------------------|-----------|----------|----------|
| draw | 元素选择器 | string | 是 | - |
| limit | 限制区域选择器 | string | 是 | - |
| canvas | canvasId | string | 是 | - |
| finish | 完成回调 | function | 是 | - |
| fail | 失败回调 | function | 是 | - |
| scope | 作用域 | object | 是 | - |
如有任何问题或建议，欢迎通过邮箱联系：jiazhuo459823@163.com
ISC