上傳頭像插件
目的： 幫助開發(fā)者快速開發(fā)上傳頭像功能點(diǎn)
背景： 現(xiàn)在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個(gè)比較自由度的上傳并且可以剪切的插件。
資源： 具體資源請查看這里
實(shí)現(xiàn)大致思路如下：
先有一個(gè)上傳的（本地上傳的功能），然后獲取圖片的地址。
獲取圖片地址之后，進(jìn)行截取圖片（這里推薦一個(gè)插件）點(diǎn)這里，具體怎么用就不再贅述。
等截取圖片之后，需要將截取的文件轉(zhuǎn)換為二進(jìn)制大文件。$('#image').cropper('getCroppedCanvas').toBlob();
調(diào)取接口，將二進(jìn)制大文件上傳即可。
直接上代碼：
- 先引入如下文件
cropper.js [點(diǎn)這里](https://github.com/fengyuanchen/cropperjs)
- 具體業(yè)務(wù)代碼
$(function () {
var URL = window.URL || window.webkitURL;
var $image = $('#image');
var $rotate = $('#userImg_rotate');
var $reUpload = $('#userImg_reUpload');
var $zoomOut = $('#userImg_zoomOut');
var $zoomIn = $('#userImg_zoomIn');
var $save = $('#userImg_save');
var croppable = false;
var $previews = $('.userImg_preview');
var options = {
aspectRatio: 1,
viewMode: 1,
built: function () {
croppable = true;
},
build: function (e) {
var $clone = $(this).clone();
$clone.css({
display: 'block',
width: '100%',
minWidth: 0,
minHeight: 0,
maxWidth: 'none',
maxHeight: 'none'
});
$previews.css({
width: '100%',
overflow: 'hidden'
}).html($clone);
},
crop: function (e) {
var imageData = $(this).cropper('getImageData');
var previewAspectRatio = e.width / e.height;
$previews.each(function () {
var $preview = $(this);
var previewWidth = $preview.width();
var previewHeight = previewWidth / previewAspectRatio;
var imageScaledRatio = e.width / previewWidth;
$preview.height(previewHeight).find('img').css({
width: imageData.naturalWidth / imageScaledRatio,
height: imageData.naturalHeight / imageScaledRatio,
marginLeft: -e.x / imageScaledRatio,
marginTop: -e.y / imageScaledRatio
});
});
}
};
var originalImageURL = $scope.userInfo_imgUrl;
var uploadedImageURL;
$scope.initCropper = function(){
// init
$image.attr('src',$scope.userInfo_imgUrl).cropper(options);
};
// rotate
$rotate.on('click', function(){
$image.cropper('rotate', 90);
});
// zoomOut
$zoomOut.on('click',function(){
$image.cropper('zoom', -0.1);
});
// zoomIn
$zoomIn.on('click',function(){
$image.cropper('zoom', 0.1);
});
// Move
/*$move.on('click',function(){
$image.cropper('setDragMode');
});*/
// reUpload
$reUpload.on('click',function(){
$image.cropper('destroy').attr('src', $scope.userInfo_imgUrl).cropper(options);
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
uploadedImageURL = '';
}
});
// Keyboard
$(document.body).on('keydown', function (e) {
if (!$image.data('cropper') || this.scrollTop > 300) {
return;
}
switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;
case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;
case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;
case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}
});
// 剪切和確定上傳圖片
$save.on('click',function(){
common.Loading.show();
$('#image').cropper('getCroppedCanvas').toBlob(function (blob) {
var formData = new FormData();
formData.append('photoFile', blob);
// 這里寫入后端給你的上傳接口
$.ajax(API_URL+'', {
method: "POST",
data: formData,
headers: {
'auth-token' : common.Cookie.get('token')
},
processData: false,
contentType: false,
success: function (res) {
common.Loading.hide();
common.Toast.show('頭像上傳成功！');
try{
$scope.$apply(function(){
$scope.isShowUnCompleteInfoBox = false;
$scope.isShowCompleteInfoBox = false;
$scope.userInfo_imgUrl = res.data;
})
}catch(err){
console.log(err)
}
},
error: function () {
common.Toast.show('頭像上傳失敗！');
}
});
});
})
// 上傳圖片，這里傳本地的圖片并且獲取一個(gè)本地圖片的路徑
var $inputImage = $('#inputImage');
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
common.Toast.show('請選擇圖片再上傳！')
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
});
