# WebHeadPicker

**Repository Path**: waveBBGgit/WebHeadPicker

## Basic Information

- **Project Name**: WebHeadPicker
- **Description**: Web头像拾取裁剪，并且上传到阿里云OSS
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 13
- **Created**: 2020-03-24
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#WebHeadPicker
#Web头像拾取器插件

>在网上找了一段时间，总的来说，cropper比较好。本项目基于cropper，以及一些互联网资源。
>您是否应该使用本项目？如果您需要把头像直接上传到阿里云OSS服务中，那么可以直接使用本项目。如果是上传到自己的应用服务器，也可以使用本项目，但是上传功能需要您自己配合后端实现。


## 支持的功能

- 支持前端直接上传头像到阿里云OSS中
- 支持头像裁剪预览功能
- 支持获取头像裁剪数据，DataUrl(base64)，Blob(二进制)
- 支持UI界面和逻辑层分离，可定制UI界面
- 支持图片比例的设置，格式为x/y
- 支持正圆图片裁剪框
- 支持裁剪后图像质量的设置
- 支持图片大小的最大值限制设置
- 支持图片选择回调
- 支持授权请求回调
- 支持上传图片回调
- 支持剪贴板图片直接粘贴进入裁剪头像模式



#### 实现后端的OSS授权接口
这里提供的是java版本，需要其他语言的请移步阿里云官方文档。

注意：阿里云OSS要开启POST跨域支持

```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<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;
    }
```
#### 开始使用
引入文件
```html
//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脚本
```javascript
	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();`

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

#### 获取Blob
`headpicker.initHeadPicker(options);`初始化后，调用`headpicker.getImgBlob();`

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