1.0.3 • Published 7 years ago
picture-crop-tool v1.0.3
picture-crop-tool
裁剪图片,支持原形,矩形和椭圆形
组件使用
1、安装插件
npm install picture-crop-tool --save-dev2、在组件中引入
const type = 'circle';
const params = {
source: 'https://store-g1.seewo.com/5f8b9588e2360fe0ecab8fd65576ebe253bb5677e4c5ea0e41d49d57b1604c94',
radius: 100,
centerX: 200,
centerY: 200,
width: 400,
height: 400,
onCutDone: (url) => {
console.log('url:', url);
}
};
new PictureCut(type, params).startToCut();参数说明
| 参数名 | 描述 | 是否必须 | 备注 |
|---|---|---|---|
| source | 【String 】 图片路径 | 是 | |
| type | 【string】裁剪类型 | 是 | circle, ellipse, rect |
| options | 【Object】裁剪的参数 | 是 |
options的值
| 参数名 | 描述 | 是否必须 | 备注 |
|---|---|---|---|
| width | 【String 】 图片路径 | 否 | 裁剪宽 |
| height | 【string】裁剪类型 | 否 | 裁剪高 |
| left | 【Number】裁剪的起始点x坐标的位置 | 否 | 裁剪类型为矩形 |
| top | Number】裁剪的起始点x坐标的位置 | 否 | 裁剪类型为矩形 |
| centerX | 【Number】中心点位置 | 是 | |
| centerY | 【Number】中心的位置 | 是 | |
| radiusX | 【Number】椭圆x轴径长 | 是 | |
| radiusY | 【Number】椭圆y轴径长 | 是 | |
| radius | 【Number】圆形半径 | 是 |