s94-imgclip/readme.md

图片裁剪工具

# **s94-ImgClip**
> 图片裁剪工具

## **安装**
```
$ npm install s94-imgclip
```
## **使用**
```js
var ImgClip = require('s94-imgclip');
imgclip = new ImgClip(document.querySelector('#imgclip'));// 第一步、在容器(#imgclip)中构建裁剪工具
var img = new Image();
img.onload = ()=>{
	imgclip.start(img); // 第二步、指定需要裁剪的图片，img必须为Image对象
}
img.src='http://s94.top/uploads/default_head_img0.jpg';
//在裁剪工具上调整自己需要的区域
//第三步，输出图片数据，有两种方式：一种是base64，一般用于直接显示；一种是Blob，可以用于FormData上传
document.querySelector('#clip-out').src = imgclip.toBase64();//base64
imgclip.toBlob(function(blobData){
	console.log(blobData);
});
```

# **属性和方法**

[new ImgClip(outer[, config])](#ImgClip) 构造方法

[start(img[, config])](#start) 传入需要处理的图片，开始剪切

[rotate(deg)](#rotate) 图像旋转

[clean()](#clean) 清理画板

[toBase64([type, quality])](#toBase64) 返回裁剪图片的base64数据

[clip([type, quality])](#clip) toBase64的别名

[toBlob(callback[, type, quality])](#toBlob) 返回裁剪图片的blob数据


<p id="ImgClip"></p>

## **new ImgClip(outer[, config])** 
- outer `Node` 构建裁剪工具的容器，必须为节点，且nodeType==1
- config `Object` 配置数据
	- ratioWH `Number` 输出图片的宽高比,如果不为零，剪切框伸缩会固定
	- outputWH `String` 输出分辨率，不设定按图片分辨率比例输出。格式为W*H，如400\*400(宽400高400)，400(宽400高自适应)，\*400(高400宽自适应)
- 返回 `ImgClip` 裁剪工具对象
>在outer内构建裁剪作业的canvas
```js
var ImgClip = require('s94-imgclip');
imgclip = new ImgClip(document.querySelector('#imgclip'));
```

<p id="start"></p>

## **start(img[, config])** 
- img `Image` 裁剪的图片对象
- config `Object` 同构造函数中的config，区别在于此处的config只对当前图片生效
- 返回 `ImgClip` 当前裁剪工具对象
>传入需要处理的图片img
```js
var img = new Image();
img.onload = ()=>{
	imgclip.start(img); // 第二步、指定需要裁剪的图片，img必须为Image对象
}
img.src='http://s94.top/uploads/default_head_img0.jpg';
```

<p id="rotate"></p>

## **rotate(deg)** 
- deg `Number` 图像旋转的弧度，注意此处传入的是弧度，而非角度，Math.PI=180度
- 返回 `ImgClip` 当前裁剪工具对象
>图像旋转
```js
imgclip.rotate(Math.PI*0.5); //旋转90度
```

<p id="clean"></p>

## **clean()** 
- 返回 `ImgClip` 当前裁剪工具对象
>清理画板，移除裁剪的图片，再次使用，需要重新调用`start`
```js
imgclip.clean();
```

<p id="toBase64"></p>

## **toBase64([type, quality])** 
- type `String` 表示生成图片类型[jpg,png,webp]。(**默认值**:png)
- quality `Number` 表示生成图片质量[0-1] (**默认值**:1)
- 返回 `String` 图片的base64数据
>输出裁剪图片，返回图片的base64数据
```js
console.log(imgclip.toBase64()); //data:image/png;base64,iVBOR.....
```

<p id="clip"></p>

## **clip([type, quality])**

>toBase64的别名
```js
console.log(imgclip.clip()); //data:image/png;base64,iVBOR.....
```

<p id="toBlob"></p>

## **toBlob(callback[, type, quality])**
- callback `Function` 回调函数，用于接收裁剪后图片的Blob数据
- type `String` 表示生成图片类型[jpg,png,webp]。(**默认值**:png)
- quality `Number` 表示生成图片质量[0-1] (**默认值**:0.92)
- 返回 `Promise`|`underfind`
>输出裁剪图片，返回图片的blob数据
```js
imgclip.toBlob(function(blobData){
	console.log(blobData);
});
//支持使用Promise异步调用
imgclip.toBlob().then(function(blobData){
	console.log(blobData);
});
```