上傳頭像插件
目的： 幫助開發者快速開發上傳頭像功能點
背景： 現在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');}});復制代碼
