Crop - ChinaSS/Util GitHub Wiki

#Crop Crop为图片裁剪组件，遵循AMD标准，依赖jQuery、WebUploader、Cropper

主要功能点如下：
1.裁剪图片
2.预览裁剪后图片
3.上传裁剪后图片

注：默认采用前端裁剪，将裁剪好的图片直接上传至后台； 如果浏览器不支持裁剪，将裁剪参数和原图片文件上传至后台，由后台来完成裁剪工作

样例代码

html

<div id="cropper"></div>
<button id="submit">确定</button>

javascript

require(["Crop"], function(Crop){
    //初始化Crop
    var crop = Crop({
        //Crop的初始化选择器
        ratio : 4 / 3,
        //图片提交上传地址
        url : "http://localhost:8080/test",
        //图片上传时额外参数
        formData : {
            "aaa" : "aaa",
            "bbb" : "bbb"
        },
        success : function(file, response) {
            alert("裁剪成功！");
        },
        error : function(file, reason) {
            alert("裁剪失败！");
        }
    });
})

后台裁剪核心代码，详情参看CropController.java

API说明

通过Crop.init(config)即可初始化并得到Crop对象

##Config对象

属性 是否可选 说明 参数
url 必选 图片上传地址
src 可选 图片的src
accept 可选 图片允许的后缀[不带点，多个用逗号分割]
ratio 可选 图片裁剪的宽、高比例，默认16/9
formData 可选 图片上传时额外参数
success 可选 图片上传成功后回调 file, response
error 可选 图片上传失败后回调 file, reason

##方法

名称 说明 参数
close 关闭 无
setFormData 设置formData data

##裁剪属性

名称 说明
x 水平方向距离左侧的距离
y 垂直方向距离顶部的距离
width 裁剪区域的宽度
height 裁剪区域的高度
rotate 图片旋转的角度
scaleX 水平方向缩放比例
scaleY 垂直方向绽放比例

copyright:CSS

⚠️ **GitHub.com Fallback** ⚠️