生活随笔
收集整理的這篇文章主要介紹了
截取图片生成头像插件
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
上傳頭像插件
目的： 幫助開(kāi)發(fā)者快速開(kāi)發(fā)上傳頭像功能點(diǎn)
背景： 現(xiàn)在b，g能搜到的頭像上傳插件并不太好用，所以想提供一個(gè)比較自由度的上傳并且可以剪切的插件。
資源： 具體資源請(qǐng)查看這里
實(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)
復(fù)制代碼具體業(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(
'請(qǐng)選擇圖片再上傳！')}}});}
else {
$inputImage.prop(
'disabled',
true).parent().addClass(
'disabled');}});
復(fù)制代碼
總結(jié)
以上是生活随笔為你收集整理的截取图片生成头像插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
