# 🎨 crazy-poster-taro

一个基于 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>
```

## 📚 API

### JzWxml2Canvas(options)

| 参数                | 说明                   | 类型      | 是否必填 | 默认值   |
|---------------------|------------------------|-----------|----------|----------|
| draw                | 元素选择器             | string    | 是       | -        |
| limit               | 限制区域选择器         | string    | 是       | -        |
| canvas              | canvasId               | string    | 是       | -        |
| finish              | 完成回调               | function  | 是       | -        |
| fail                | 失败回调               | function  | 是       | -        |
| scope               | 作用域                 | object    | 是       | -        |

## 📧 联系我

如有任何问题或建议，欢迎通过邮箱联系：jiazhuo459823@163.com

## 📜 License

ISC