196 lines
7.9 KiB
Markdown
196 lines
7.9 KiB
Markdown
## 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>
|
||
```
|
||
|
||
#### 预览地址
|
||
|