1.0.4 version

WebHeadPicker

特性

支持本地裁剪预览

先裁剪后上传数据,减少垃圾图像数据

直传OSS

支持前端直接上传头像到阿里云OSS中

支持获取头像裁剪数据

可获取DataUrl(base64),Blob(二进制)

支持自定义UI界面

逻辑与界面分离

支持图片比例的设置

可以设置裁剪器的图像长宽比

支持正圆图片裁剪框

可以设置裁剪框为圆形(长宽必须1:1)

支持裁剪后图像质量的设置

例如:0.9

支持图片大小的最大值限制设置

可以设置选择的图片大小不能超过多少

支持剪贴板图片粘贴裁剪

通过截图软件截图后直接粘贴即可进入裁剪

支持图片选择回调

让使用者自己处理返回的信息

支持授权请求回调

让使用者自己处理返回的信息

支持上传图片回调

让使用者自己处理返回的信息

用法

后端OSS授权:这里提供JAVA版本的函数,需要其他语言的请移步阿里云官方文档。

public JSONObject getOSSToken()
{
    String endpoint = "oss-cn-shanghai.aliyuncs.com";
    String accessId = "accessId ";
    String accessKey = "accessKey ";
    String bucket = "bucket ";
    String dir = "picture/";
    String host = "http://" + bucket + "." + endpoint;
    OSSClient client = new OSSClient(endpoint, accessId, accessKey);
    try {
        long expireTime = 30;
        long expireEndTime = System.currentTimeMillis() + expireTime * 1000;
        Date expiration = new Date(expireEndTime);
        PolicyConditions policyConds = new PolicyConditions();
        policyConds.addConditionItem(PolicyConditions.COND_CONTENT_LENGTH_RANGE, 0, 1048576000);
        policyConds.addConditionItem(MatchMode.StartWith, PolicyConditions.COND_KEY, dir);

        String postPolicy = client.generatePostPolicy(expiration, policyConds);
        byte[] binaryData = postPolicy.getBytes("utf-8");
        String encodedPolicy = BinaryUtil.toBase64String(binaryData);
        String postSignature = client.calculatePostSignature(postPolicy);

        Map respMap = new LinkedHashMap();
        respMap.put("accessid", accessId);
        respMap.put("policy", encodedPolicy);
        respMap.put("signature", postSignature);
        //respMap.put("expire", formatISO8601Date(expiration));
        respMap.put("dir", dir);
        respMap.put("host", host);
        respMap.put("expire", String.valueOf(expireEndTime / 1000));
        JSONObject ja1 = JSONObject.fromObject(respMap);
        return ja1;
    } catch (Exception e) {
        e.printStackTrace();
    }
    return null;
}
				

JavaScript方式调用

//必须引入文件
//CSS
bootstrap/css/bootstrap.min.css
cropper/cropper.min.css
headpicker/headpicker.css
//Js
cropper/cropper.min.js
headpicker/headpicker.js
bootstrap/js/bootstrap.min.js
					
var picker = $('#avatar-modal');//头像弹出层
    
    //弹出层
$('#head').click(function (e) {
	picker.modal('show');
});
    
var headpicker = new HeadPicker();
var options = {
    aspectRatio:1,//图片比例
    circular:true,//是否开启原型遮罩
    guides:false,//是否显示虚线
	accessApi:"http://192.168.1.102:8080/oss/access",//授权接口
	host:"http://data.yueare.com/",//OSS访问地址,这里我绑定了自己的域名,可以直接使用阿里云提供的
	maxFileSize:1024*1024*2,//设置文件的最大值
	imageQuality:0.9,//设置图像的质量
	fileChooseInput:$('#avatarInput'),//设置图片选择input
	orignImgContainer:$('#orignImg'),//设置原始图像的img容器
	previewImgContainers:$('.avatar-preview'),//设置预览图片的容器,支持多个容器
	rotateBtns:$('.avatar-btns'),//设置图片旋转按钮
	completeBtn:$('.avatar-save'),//设置保存按钮
    clipboardListenerContainerID:"cp",//对一个容器设置剪贴板粘贴监听事件(可选)
            //文件选择消息回调
	picChooseCallBack:function (msg) {
		alert(msg);
	},
            //授权消息回调
	accessCallBack:function (msg) {
		alert(msg);
	},
            //上传回调
	uploadCallBack:function (msg,backImgurl) {
		$('#head').attr('src',backImgurl);
		picker.modal('hide');
	}
};
headpicker.initHeadPicker(options);

//获取DataURl
var dataurl = headpicker.getImgDataUrl();
console.log(dataurl);

//获取Blob
headpicker.getImgBlob(function(blob) {
   console.log(blob);
});

				

DEMO - 点击下面的图片选择图片(demo点击保存会提示授权失败)

Logo

立即使用

有BUG和建议,请移步到码云提交wiki,Thanks!