效果预览
点击下载前往码云下载相应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);
}