• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

WebHeadPicker: Web头像拾取裁剪,并且上传到阿里云OSS

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

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);

获取DataURl

headpicker.initHeadPicker(options);初始化后,调用headpicker.getImgDataUrl();

var dataurl = headpicker.getImgDataUrl();console.log(dataurl);

获取Blob

headpicker.initHeadPicker(options);初始化后,调用headpicker.getImgBlob();

headpicker.getImgBlob(function(blob) {   console.log(blob);});

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap