网页端基于js的图片裁剪

效果预览

点击下载前往码云下载相应js

使用说明

CDN 使用

<script src="croptool.min.js"></script>
<script>
    window.clip = new Clip({
        dragBoxClass: 'block',  //裁剪框类名 
        clipRadio: 1 / 1,       //裁剪比例  宽/高  传0或空或不传等于不设置比例
        //单位px  仅为裁剪框的宽高  不等同裁剪后最终图片宽高
        initialHeight: 100,				//裁剪框初始高度
        initialWidth: 100,				//裁剪框初始宽度
        minHeight: 100,					//裁剪框最小高度
        minWidth: 100,					//裁剪框最小宽度
        maxWidth: 0,					//裁剪框最大宽度  不会大于裁剪区域宽度
        maxHeight: 0,					//裁剪框最大高度  不会大于裁剪区域高度
        cornerColor: '#39f',			//裁剪框颜色
        encode: 'base64',				//文件类型
        type: 'png',					//保存图片类型
        name: 'img',					//文件名字
        quality: 1,					    //压缩质量
        onDone: function (e) {
            //裁剪完成
            document.getElementById('previewImg').src = e;
        },
        onCancel: function(){
            //取消裁剪
        }
    });
    //实例完成后，在事件中调用以下方法即可
    clip.setSize(file[0]);    //参数是 单文件 file
</script>

参数说明

参数	类型	默认值	说明
dragBoxClass	String	block	裁剪框类名
clipRadio	Number	-	裁剪比例，为0或空时裁剪无比例 格式为 4 / 3 或 width / height，width与height需是整数
initialHeight	Number	100	裁剪框初始高度 最小为30，当取值小于30时按默认值100使用(初始高度请取值在最大高度与最小高度之间)
initialWidth	Number	100	裁剪框初始宽度 最小为30，当取值小于30时按默认值100使用(初始高度请取值在最大宽度与最小宽度之间)
minHeight	Number	100	裁剪框最小高度 最小为30，当取值小于30时按默认值100使用
minWidth	Number	100	裁剪框最小宽度 最小为30，当取值小于30时按默认值100使用
maxHeight	Number	图片高度	裁剪框最大高度 当取值为0或不规范时按默认值图片高度使用
maxWidth	Number	图片宽度	裁剪框最大宽度 当取值为0或不规范时按默认值图片宽度使用
cornerColor	String	#39f	裁剪框颜色 格式为 #f00 或 red
encode	String	base64	导出格式，支持 base64
type	String	png	裁剪后图片的类型，仅支持jpeg/png两种
name	String	img	裁剪后的图片名，仅在导出格式为file时可用
quality	Number	1	压缩质量
onDone	Function	-	裁剪完成后的回调函数 回调参数1个，值为导出格式的文件数据
onCancel	Function	-	裁剪取消后的回调函数

示例

body,html{width:100%;height:100%;background:#f2f2f2;padding:0;margin:0;font-size:1em;}
.inputbox{ width: 1000px; margin: 0 auto;}
.code{background:none repeat scroll 0 0 #E3F4F9;border:1px solid #BAE2F0;font:12px "Courier New",Courier,monospace;margin:30px auto;padding:10px 10px 40px;width:980px}
.code p{height:24px;line-height:24px}
.code span{zoom:1;margin-right:5px;width:85px;font-weight:bold;color:#39f}

#clipping-container{ width: 1000px; margin: 0 auto;}
.previewImg{ display: block; width: auto; max-width: 1000px; height: auto; margin: 10px auto;}

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

function chooseImg(event){
    var files = event.files || event.dataTransfer.files,
        file = files[0] || files;
    event.value = '';
    window.clip = new Clip({
        dragBoxClass: 'block',
        clipRadio: 4 / 3,
        cornerColor: '#f00',
        maxWidth: 300,
        encode: 'base64',
        type: 'png',
        name: 'rtest',
        quality: 0.9,
        onDone: function (e) {
            document.getElementById('previewImg').src = e;
        },
        onCancel: function(){

        }
    });
    clip.setSize(file);
}