# CanvasImg

**Repository Path**: AngelTheonly/CanvasImg

## Basic Information

- **Project Name**: CanvasImg
- **Description**: 小程序canvas生成图片通用方法封装
- **Primary Language**: 微信
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-01-15
- **Last Updated**: 2022-06-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 小程序canvas生成图片通用方法封装

> ### 引用组件

```
"usingComponents": {
   "v-canvas": "/components/SharePoster/index"
}
```

<html>
<!--在这里插入内容-->
 <p style="color: #999">在小程序页面json中引用</p>
</html>

> ### Options 参数

#### canvasid

参数 | 说明| 类型 | 是否必填
---|---|---|----
canvasid | canvas组件id | string | 是

#### options

参数 | 说明| 类型 | 是否必填
---|---|---|----
width | canvas宽度 | string/number | 是
height | canvas高度 | string/number | 是
bgColor | canvas背景颜色 | string | 是
images | 网络图片转换本地图片对象 | object | 否
base64 | base64转换本地图片对象 | object | 否

> ### Methods 方法 * 必传

方法名 | 说明 | 返回参数
---|---|---
draw | canvas绘制方法必传 | e.detail:ctx, canvasDraw, data
<html>
<!--在这里插入内容-->
 <p style="color: #999">返回参数详细说明：</p>
</html>

```
{
    ctx: 'cnavas上下文绘制对象',
    // 组件封装方法
    canvasDraw: {
        width: '画布宽',
        height: '画布高',
        px2rem(num), // 自适应单位转换(375设计稿)
        circleImg(ctx, img, x, y, r), // 绘制圆形图片方法
        drawImage(canvasName) // 保存图片方法需传入 canvas绑定的id名
    },
    // 图片格式化返回对象
    data: {
        images: {
            // 例
            avatar:{
                url: '路径',
                width: '图片原始宽度',
                height: '图片原始高度'
            }
        }, // 网络图片转换本地图片对象
        base64: {
            // 例
            avatar： 'wx://wechat/xiaocheng/avatar_YSNA.png'
        } // base64转换本地图片对象
    }
}

```


> ### Events 事件

事件名 | 说明 | 返回参数
---|---|---
confirm | canvas生成图片成功事件 | 图片路径 e.detail
error | canvas生成图片错误事件  | 错误信息 e.detail