# Clipping

**Repository Path**: void_rangers/clipping

## Basic Information

- **Project Name**: Clipping
- **Description**: 仿微信移动端的图片裁剪组件（原生JS）
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-02
- **Last Updated**: 2022-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 插件

## README

# Clipping

#### 介绍
移动端的图片裁剪组件（原生JS、无依赖）

#### 使用说明 CDN

```
<script src="./dist/clipping.min.js"></script>
<script>
    var clipping = new Clipping({
        onDone: function (e) {
            document.getElementById('previewImg').src = e;
        }
    });

    //实例完成后，在事件中调用以下方法即可
    clipping.created(files[0]);    //参数是 单文件 file
</script>
```


#### 参数说明

| 参数 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| width | <code>Number</code> | 500 | 裁剪区域的宽度 |
| height | <code>Number</code> | 500 | 裁剪区域的高度 |
| ratio | <code>Number</code> | - | 裁剪区域的宽高比 格式为 16 / 9 或 width / height |
| ISRotate | <code>Boolean</code> | false | 是否开启自由旋转（可由双指控制旋转角度） |
| encode | <code>String</code> | base64 | 导出格式，支持 base64|blob|file |
| type | <code>String</code> | jpeg | 裁剪后图片的类型，仅支持jpeg/png两种 |
| name | <code>String</code> | clipic | 裁剪后的图片名，仅在导出格式为file时可用 |
| quality | <code>Number</code> | 0.9 | 压缩质量 |
| buttonText | <code>Array</code> | ['取消', '确定'] | 底部两个按钮文案（顺序不可变） |
| onDone | <code>Function</code> | - | 裁剪完成后的回调函数 回调参数1个，值为导出格式的文件数据 |
| onCancel | <code>Function</code> | - | 裁剪取消后的回调函数 |

#### 示例

```Css
body,html{width:100%;height:100%;background:#f2f2f2;padding:0;margin:0;font-size:1em;}   .button{width:80%;background:green;color:#fff;padding:10px;text-align:center;margin:20px auto;border-radius:4px;position:relative;}
.upload-img{position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;}
#previewImg{ width: 100%; max-width:100%;}
```

```
<section>
    <img id="previewImg" src="" alt="预览" />
    <div class="button" role="button">
	选择图片 <input type="file" name="file" class="upload-img" accept="image/*" onchange="chooseImg(this)" />
    </div>
</section>
```

```Javascript
var clipic = new Clipping({
    width: 500,
    height: 400,
    onDone: function (e) {
        document.getElementById('previewImg').src = e;
    },
    onCancel: function () {
        console.log('取消裁剪');
    }
});

function chooseImg(event){
    var files = event.files || event.dataTransfer.files;
    clipic.created(files[0]);
    event.value = ''
}
```