clip.js - 图像裁剪

DEMO

http://y.qq.com/m/demo/ctools/clip.html

GitHub

https://github.com/xingqiao/CLIP/

支持功能

• 支持解析图片、Canvas、文件、图片链接

• 支持裁剪成正方形、圆形、自定义矩形

• 支持缩放操作

• 支持保存成PNG/JPG

初始化

不依赖其他第三方库

<script src="qmv.js"></script>

var clip = new CLIP({
    shape: CLIP.SHAPE.SQUARE,
    onsave: function (result) {
        console.log(result);
    },
    onerror: function (e) {
        console.log("error", e);
    }
});
clip.load("./test.jpg").show();

初始化参数

参数	类型	默认值	描述
background	String	null	裁剪出图片的背景色，默认为透明，保存成jpg时默认为白色
shape	String	"square"	裁剪形状，值在 CLIP.SHAPE 中定义，默认是正方形
rectRatio	Number	-	矩形裁剪形状宽高比，当 type=CLIP.SHAPE.RECT 时有效，值为 宽:高，默认为 1，相当于正方形
type	String	"image/png"	保存的图片类型，默认是 image/png，值在 CLIP.TYPE 中定义
quality	Number	-	保存的jpg图片质量，type=image/jpeg 时有效，有效值0~1
width	Number	-	保存图片的宽度，不传该值时根据height的值等比缩放
height	Number	-	保存图片的高度，不传该值时根据width的值等比缩放

CLIP对象属性

属性名	类型	值	描述
result	Object	-	返回base64链接形式的裁剪结果
width	Number	-	获取或设置保存图片的宽度设置
height	Number	-	获取或设置保存图片的高度设置

CLIP对象方法

方法名	描述
load	加载图片
save	保存裁剪结果
show	打开裁剪弹窗
hide	关闭裁剪弹窗
reset	重置图片缩放状态
clear	清空裁剪板

CLIP对象事件

事件名	描述
loading	事件在图片开始加载时触发
load	事件在图片加载完成时触发
show	事件在打开裁剪弹窗时触发
hide	事件在关闭裁剪弹窗时触发
save	事件在裁剪完成时触发
error	事件在执行出错时触发

常量定义

错误类型 CLIP.ERROR

常量	值	描述
CLIP.ERROR.LOAD_IMG_FAIL	1	加载图片失败
CLIP.ERROR.SAVE_IMG_FAIL	2	保存图片失败
CLIP.ERROR.OPEN_FILE_FAIL	3	读取文件失败

图片加载状态 CLIP.STATE

常量	值	描述
CLIP.STATE.LOADING	1	加载中
CLIP.STATE.LOADED	2	加载完成

裁剪形状 CLIP.SHAPE

常量	值	描述
CLIP.SHAPE.CIRCLE	"circle"	圆形
CLIP.SHAPE.SQUARE	"square"	正方形
CLIP.SHAPE.RECT	"rect"	正方形

保存的图片类型 CLIP.TYPE

常量	值	描述
CLIP.TYPE.PNG	"image/png"	png
CLIP.TYPE.JPG	"image/jpeg"	jpg