dengrui/components/mosowe-canvas-image/readme.md

## mosowe-canvas-image：一个可以制作多用途图片的插件（海报，二维码，分享图）

### v1.2.0：
1. 添加透明度`globalAlpha`,值0-1；
2. 修改只能画一个圆形图片问题，画圆形图片时耗时较多，因为额外增加了一个canvas处理圆形图片，请注意`arcX`与`arcY`的说明；

### v1.1.0：

1. 添加本地图片渲染，已支持本地相册/相机 + https的网络图片，建议画布宽高：750*1330
2. 添加导出图片的类型：`imgType`，可选值，jpg、png
3. 添加本地图片压缩功能：`compress`是否开启压缩,`compressSize`：压缩程度，默认2M，lists列表图片项需增加传参`file`，
4. 解决H5网络图片“canvasToTempFilePath:fail SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported”错误问题，图片服务器需支持“Access-Control-Allow-Origin: *”
5. 使用非solt插槽触发事件时，请确认`$ref`是否正确
6. 示例增加参数编辑，使用前体验插件

#### 平台支持：

| APP  |  H5  | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节跳动小程序 | QQ小程序 |
| :--: | :--: | :--------: | :----------: | :--------: | :------------: | :------: |
|  √   |  √   |     √      |      ×       |    未测    |      未测      |   未测   |

#### 插件功能

1. 支持多图片绘制，多文本绘制，圆形图片绘制；
2. 支持矩形（线条）绘制；
3. 支持圆形绘制；
4. 支持二维码生成，项目用不上可以去插件内去除，毕竟这个插件携带的比较大，单纯用来生成二维码图片也是阔以的；
5. 支持绘图后预览。

多用于海报图，分享图；

注意H5跨域问题及小程序白名单配置；

图片是网络图片：https://....（require及import引入不了3Kb以上的绝对路径图片，若有大神知道处理方法，望不吝赐教，谢谢！）

#### 属性

| 名称         | 类型             | 默认值       | 说明                                                     | 版本  |
| ------------ | ---------------- | ------------ | -------------------------------------------------------- | ----- |
| width        | Number \String   | 200          | canvas画布宽度，也是导出图片宽度，单位px，值中不要带单位 | 1.0.0 |
| height       | Number \String   | 200          | canvas画布高度，也是导出图片高度，单位px，值中不要带单位 | 1.0.0 |
| showPreview  | Boolean          | false        | 绘制完成后是否打开预览                                   | 1.0.0 |
| lists        | Array            | []           | 绘制的元素列表：图片，文字，矩形（线条），圆形，二维码   | 1.0.0 |
| imgType      | String           | jpg          | 生成图片格式，可选：png                                  | 1.1.0 |
| compress     | Boolean          | false        | 是否开启图片压缩                                         | 1.1.0 |
| compressSize | Number\String    | 2097152 (2M) | 超过多少M压缩                                            | 1.1.0 |




#### lists\<item>属性

注意：图文先后顺序，底层的图片靠前，最上层的在最后，圆形图片放在最后，因为一旦绘制圆形，后续的元素都只在该圆形内显示，而超过圆形范围的将看不见。

| 名称     | 类型   | 必填 | 说明                                                         |版本|
| :------- | :----- | :--- | :----------------------------------------------------------- |:----|
| type     | String | 是   | 元素类型：`image`图片，`text`文本，`rect`矩形（线条），`arc`圆形，`qr`二维码 |1.0.0|
| content  | String | 否   | image：图片路径（必填），text：文字（必填），qr：转二维码的数据（必填），rect及arc：非必填 |1.0.0|
| x        | Number | 是   | X轴坐标，绘制圆形图片时：x = arcX - arcR                     |1.0.0|
| y        | Number | 是   | Y轴坐标，绘制圆形图片时：y = arcY - arcR                     |1.0.0|
| width    | Number | 否   | 图片、矩形（线条）、二维码宽度                               |1.0.0|
| height   | Number | 否   | 图片、矩形（线条）、二维码高度                               |1.0.0|
| arc      | Boolen | 否   | type=image时：是否绘制圆形图片                               |1.0.0|
| arcX     | Number | 否   | type=arc时：绘制圆形时中心点X轴坐标，type=image时，图片在圆形canvas的X坐标，多为负数，版本`1.2.0`                  |1.2.0|
| arcY     | Number | 否   | type=arc时：绘制圆形时中心点Y轴坐标，type=image时，图片在圆形canvas的Y坐标，多为负数，版本`1.2.0`                  |1.2.0|
| arcR     | Number | 否   | type=image、arc时：绘制圆形的半径                            |1.0.0|
| color    | String | 否   | 绘制文本、矩形（线条）的颜色，默认：#000000                  |1.0.0|
| size     | Number | 否   | 绘制文本的字号大小，默认：20                                 |1.0.0|
| align    | String | 否   | 绘制文本的对齐方式，默认：left                               |1.0.0|
| maxWidth | Number | 否   | 绘制文本的最大宽度，文字长度超过该值会被压缩                 |1.0.0|
| file     | file   | 否   | 选择本地图片的file文件，版本`1.1.0`                          |1.1.0|
| globalAlpha  | Number | 否   | 透明度：0~1，默认1，版本`1.2.0` |1.2.0|

#### slots

| 名称    | 说明                               |
| :------ | :--------------------------------- |
| default | 自定义插槽，点击此区会触发绘图事件 |

#### 事件

| 名称        | 回调参数 | 说明                                 |
| ----------- | -------- | ------------------------------------ |
| canvasImage | url      | 绘制成功后返回的本地地址，H5为base64 |



#### 使用方式

若`page.json`中配置了`"easycom": true`，则无需`script`引入就可以使用，没有则需要引入。

1. 无slot：组件标签添加`ref`属性，采用父级调用子组件`createCanvas()`方法使用，见后文示例；
2. 有slot：slot区点击就会执行

#### 示例

```javascript
// js
data () {
    return {
			canvasUrl: '',
			lists: [
						{
							type: 'image',
							content: 'https://www.zhonglixunqing.cn/images/uniapp/1.jpg', 
							width: 200, 
							height: 100, 
							x: 50, 
							y: 20, 
						},
						{
							type: 'image',
							content: 'https://www.zhonglixunqing.cn/images/uniapp/2.jpg', 
							width: 80, 
							height: 80, 
							x: 20, 
							y: 200, 
							arc: false, 
							arcX: 0, 
							arcY: 0, 
							arcR: 0 
						},
						{
							type: 'text',
							content: '扫一扫，获取更多信息', 
							x: 120, 
							y: 250, 
							color: '#ff0000', 
							size: 10, 
							// maxWidth: 100, 
							// align: 'left', 
						},
						{
							type: 'rect',
							width: 1,
							height: 100,
							x: 0,
							y: 10,
							color: '#ff0000',
						},
						{
							type: 'image',
							content: 'https://www.zhonglixunqing.cn/images/uniapp/3.jpg', 
							width: 100, 
							height: 100, 
							x: 200, 
							y: 200, 
							arc: true, 
							arcX: 250, 
							arcY: 250, 
							arcR: 50 
						},
					]
    };
  },
  methods: {
		beginCanvas () {
			this.$refs.mosoweCanvasComponents.createCanvas();
		},
		_canvasImage (e) {
			this.canvasUrl = e;
		}
	}
```

插件外独立按钮触发：

```html
		<button type="default" @click="beginCanvas">开始绘图</button>
		<image :src="canvasUrl" mode="widthFix"></image>
		<mosowe-canvas-image 
			ref="mosoweCanvasComponents" 
			@canvasImage="_canvasImage" 
			:lists="lists" 
			height="300" 
			width="300"
			showPreview />
```

slot插槽触发：

```html
		<mosowe-canvas-image 
			:lists="lists" 
			height="300" 
			width="300"
			showPreview >
			<view class="in_btn">
				slot按钮的
			</view>
			</mosowe-canvas-image>
```

#### 预览地址