开源软件名称:WebHeadPicker
开源软件地址:https://gitee.com/pumelotea/WebHeadPicker
开源软件介绍:
#WebHeadPicker#Web头像拾取器插件 在网上找了一段时间,总的来说,cropper比较好。本项目基于cropper,以及一些互联网资源。您是否应该使用本项目?如果您需要把头像直接上传到阿里云OSS服务中,那么可以直接使用本项目。如果是上传到自己的应用服务器,也可以使用本项目,但是上传功能需要您自己配合后端实现。
支持的功能- 支持前端直接上传头像到阿里云OSS中
- 支持头像裁剪预览功能
- 支持获取头像裁剪数据,DataUrl(base64),Blob(二进制)
- 支持UI界面和逻辑层分离,可定制UI界面
- 支持图片比例的设置,格式为x/y
- 支持正圆图片裁剪框
- 支持裁剪后图像质量的设置
- 支持图片大小的最大值限制设置
- 支持图片选择回调
- 支持授权请求回调
- 支持上传图片回调
- 支持剪贴板图片直接粘贴进入裁剪头像模式
实现后端的OSS授权接口这里提供的是java版本,需要其他语言的请移步阿里云官方文档。 注意:阿里云OSS要开启POST跨域支持 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<String, String> respMap = new LinkedHashMap<String, String>(); 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; } 开始使用引入文件 //CSS<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"><link href="cropper/cropper.min.css" rel="stylesheet"><link href="headpicker/headpicker.css" rel="stylesheet">//Js<script src="cropper/cropper.min.js"></script><script src="headpicker/headpicker.js"></script><script src="bootstrap/js/bootstrap.min.js"></script> 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); 获取DataURlheadpicker.initHeadPicker(options); 初始化后,调用headpicker.getImgDataUrl();
var dataurl = headpicker.getImgDataUrl();console.log(dataurl); 获取Blobheadpicker.initHeadPicker(options); 初始化后,调用headpicker.getImgBlob();
headpicker.getImgBlob(function(blob) { console.log(blob);}); |
请发表评论