swallowcd-image-process

Swallowcd-image-process
====
Image pre processing for upload (html5 + canvas)

> 解决图片上传前缩放到一定比例自动居中裁剪、等比缩放等。后期版本应该会加入手动设置裁剪位置及缩放比例。

Create by swallowcd / 2017-03-13

使用方法
----

``html


选择图片

`

使用效果图
----

> !github

====

> !github

Options 参数
----

* elm: 'buttonId' 选择图片按钮id(必须)

* target: 'imgWrapper' 图片预览容器id(可选)

* crop: true 是否裁剪图片(可选)

> 为true时，必须同时设置width、height值大于0

> 裁剪规则: 图片缩放到一定比列(即一边等于设置值，另一边超出设置值部分裁去)，居中裁剪

> 图片尺寸与设置裁剪尺寸相同时，不做canvas重绘处理

* width: 500 裁剪或缩放宽度为500px(可选)

> crop为false或不配置crop，则为缩放尺寸。

> 1.限制宽度缩放，则只需设置width值。

> 2.限制高度缩放，则只需设置height值。

> 3.若crop为false，同时设置了width/height值，则只按width缩放，忽略height

* height: 500 裁剪或缩放高度为500px(可选)

* type: 'jpg'` 上传图片目标格式,默认jpg/png(可选)

> 1.不配置此项，则保留原图片格式(bmp文件会转换成jpg, gif会转换为png)。

> 2.配置后，将所有格式图片转换为配置格式。

> 3.可选值'jpg', 'png'。

> 4.HTMLCanvasElement.toDataURL()不支持'gif', 'bmp'，均输出'png'格式