上傳頭像外掛
目的： 幫助開發者快速開發上傳頭像功能點
背景： 現在b，g能搜到的頭像上傳外掛並不太好用，所以想提供一個比較自由度的上傳並且可以剪下的外掛。
資源： 具體資源請檢視這裡
實現大致思路如下：
- 先有一個上傳的（本地上傳的功能），然後獲取圖片的地址。
- 獲取圖片地址之後，進行擷取圖片（這裡推薦一個外掛）點這裡，具體怎麼用就不再贅述。
- 等擷取圖片之後，需要將擷取的檔案轉換為二進位制大檔案。$(`#image`).cropper(`getCroppedCanvas`).toBlob();
- 調取介面，將二進位制大檔案上傳即可。
直接上程式碼：
- 先引入如下檔案
cropper.js [點這裡](https://github.com/fengyuanchen/cropperjs)複製程式碼- 具體業務程式碼
$(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(`頭像上傳失敗！`);
}
});
});
})
// 上傳圖片，這裡傳本地的圖片並且獲取一個本地圖片的路徑
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`);
}
});複製程式碼