生活随笔
收集整理的這篇文章主要介紹了
截取图片生成头像插件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上傳頭像插件
目的： 幫助開發者快速開發上傳頭像功能點
背景： 現在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');}});
復制代碼
總結
以上是生活随笔為你收集整理的截取图片生成头像插件的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
