mp-cover-layer/README.md

a plugin to make an image with canvas, it can use in weapp

# mp-cover-layer
支持微信小程序和支付宝小程序的canvas图片合成工具
## Usage

```XML
<canvas class="canvas" id="canvas-id" width="750" height="1206" ></canvas>
```

```JavaScript
import CoverLayer from 'mp-cover-layer'
const cl = new CoverLayer({
  clientType: 'weapp' // alipay
})
cl.init('#canvas-id')
// put some elements step by step
await cl.putImg({
  img: 'https://shomwhere/images/background.png',
  x: 0,
  y: 0,
  width: 750,
  height: 750
})
await cl.putText({
  text: 'your text',
  x: 233,
  y: 233,
  fontSize: 32
})


// output your result in base64
const result = await cl.canvasToDataUrl()
// output your result in filepath
const tempFilePath = await cl.toTempFilePath()
```

## API

### putFillRect(options)
放置一个矩形<br>
**参数:**
|参数名|默认值|描述|
|---|---|---|
background|#fff|填充色|
width|0|宽度|
height|0|高度|
x|0|相对于左上角x轴定位|
y|0|相对于左上角y轴定位|
rotate|0|旋转角度


```JavaScript
await cl.putFillRect({
  background: '#fff'
  width: 750
  height: 1334
})
```

### putImg(options)
放置一个图片<br>
**参数:**
|参数名|默认值|描述|
|---|---|---|
img||图片的路径或者是图片的DOM对象
width|0|宽度|
height|0|高度|
x|0|相对于左上角x轴定位|
y|0|相对于左上角y轴定位|
rotate|0|旋转角度


```JavaScript
await cl.putImg({
  img: 'https://shomwhere/images/img.png',
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  rotate: 90
})
```

### putCircularImg(options)
放置一个裁切成圆形的图片<br>
**参数:**
|参数名|默认值|描述|
|---|---|---|
img||图片的路径或者是图片的DOM对象|
width|0|宽度|
height|0|高度|
x|0|相对于左上角x轴定位|
y|0|相对于左上角y轴定位|
rotate|0|旋转角度


```JavaScript
await cl.putCircularImg({
  img: 'https://shomwhere/images/img.png',
  x: 10,
  y: 10,
  width: 100,
  height: 100,
  rotate: 90
})
```

### putText(options)
放置文字<br>

**参数:**
|参数名|默认值|描述
|---|---|---|
text||文字|
x|0|相对于左上角x轴定位|
y|0|相对于左上角y轴定位|
rotate|0|旋转角度|
fontSize|12|字体大小|
textBaseline|middle|文字的基线|
fontColor|#000|字色|
align|对齐方式| left,center,right|
fontWeight|normal|规定字体的粗细。可能的值:<br>normal<br>bold<br>bolder<br>lighter<br>100<br>200<br>300<br>400<br>500<br>600<br>700<br>800<br>900<br>|
fontFamily|sans-serif|字体

```javascript
    // 放置一个旋转90度的文字,设置字色和字体大小
    await cl.putText({
      text: '23333',
      x: 200,
      y: 120,
      rotate: 90,
      fontSize: 30,
      color: '#666'
    })
```


### putParagraph(options)
放置段落,可自动换行<br>

**参数:**
|参数名|默认值|描述
|---|---|---|
text||文段
x|0|相对于左上角x轴定位|
y|0|相对于左上角y轴定位|
width|200|最大宽度,超出宽度会自动换行|
fontSize|12|字体大小|
lineHeight| 1.2| 行高|
textBaseline|middle|文字的基线|
fontColor|#000|字色|
align|对齐方式| left,center,right|
fontWeight|normal|规定字体的粗细。可能的值:<br>normal<br>bold<br>bolder<br>lighter<br>100<br>200<br>300<br>400<br>500<br>600<br>700<br>800<br>900<br>|
fontFamily|sans-serif|字体

```javascript
// 超出width的部分会自动换行
// 可通过↵或者 \n 或者 | 进行自定义换行
    await cl.putParagraph({
      text: '君不见，黄河之水天上来，奔流到海不复回。|君不见，高堂明镜悲白发，朝如青丝暮成雪。↵人生得意须尽欢，莫使金樽空对月。↵天生我材必有用，千金散尽还复来。↵烹羊宰牛且为乐，会须一饮三百杯。↵岑夫子，丹丘生，将进酒，杯莫停。↵与君歌一曲，请君为我倾耳听。↵钟鼓馔玉不足贵，但愿长醉不愿醒。↵古来圣贤皆寂寞，惟有饮者留其名。↵陈王昔时宴平乐，斗酒十千恣欢谑。↵主人何为言少钱，径须沽取对君酌。↵五花马，千金裘，↵呼儿将出换美酒，与尔同销万古愁。',
      x: 220,
      y: 100,
      width: 250,
      fontSize: 14
    })
```

### canvasToDataUrl(type, value)
获取最终图片的base64<br>
**参数:**
|参数名|默认值|描述|
|---|---|---|
type|image/jpeg|输出格式|
value|1|输出精度(0.1-1)|

```JavaScript
let img = await cl.canvasToDataUrl()
```

### toDataUrl(type, value)
同canvasToDataUrl<br>
**参数:**
|参数名|默认值|描述|
|---|---|---|
type|image/jpeg|输出格式|
value|1|输出精度(0.1-1)|

```JavaScript
let img = await cl.toDataUrl()
```

### toTempFilePath(type, value)
输出临时路径,用于保存图片<br>
**参数:**
|参数名|默认值|描述|
|---|---|---|
type|png|输出格式|
value|1|输出精度(0.1-1)|

```JavaScript
let img = await cl.toTempFilePath()
```