摘要:獲取圖片地址之后,進行截取圖片這里推薦一個插件點這里,具體怎么用就不再贅述。等截取圖片之后,需要將截取的文件轉(zhuǎn)換為二進制大文件。調(diào)取接口,將二進制大文件上傳即可。
上傳頭像插件
目的: 幫助開發(fā)者快速開發(fā)上傳頭像功能點
背景: 現(xiàn)在b,g能搜到的頭像上傳插件并不太好用,所以想提供一個比較自由度的上傳并且可以剪切的插件。
資源: 具體資源請查看這里
實現(xiàn)大致思路如下:先有一個上傳的(本地上傳的功能),然后獲取圖片的地址。
獲取圖片地址之后,進行截取圖片(這里推薦一個插件)點這里,具體怎么用就不再贅述。
等截取圖片之后,需要將截取的文件轉(zhuǎn)換為二進制大文件。$("#image").cropper("getCroppedCanvas").toBlob();
調(diào)取接口,將二進制大文件上傳即可。
直接上代碼:先引入如下文件
cropper.js [點這里](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("頭像上傳失敗!"); } }); }); }) // 上傳圖片,這里傳本地的圖片并且獲取一個本地圖片的路徑 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"); } });
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/51327.html
摘要:獲取圖片地址之后,進行截取圖片這里推薦一個插件點這里,具體怎么用就不再贅述。等截取圖片之后,需要將截取的文件轉(zhuǎn)換為二進制大文件。調(diào)取接口,將二進制大文件上傳即可。 上傳頭像插件 目的: 幫助開發(fā)者快速開發(fā)上傳頭像功能點 背景: 現(xiàn)在b,g能搜到的頭像上傳插件并不太好用,所以想提供一個比較自由度的上傳并且可以剪切的插件。 資源: 具體資源請查看這里 實現(xiàn)大致思路如下: 先有一個上傳的...
摘要:做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的,剪裁后的圖片以的形式返回,怎么上傳到后臺服務(wù)器,很簡單,這里不做介紹。 做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的demo,剪裁后的圖片以bas...
摘要:做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的,剪裁后的圖片以的形式返回,怎么上傳到后臺服務(wù)器,很簡單,這里不做介紹。 做為網(wǎng)站前段開發(fā)人員來說,用戶頭像剪裁和上傳是一個很常用的功能,一般這個功能涉及到圖片的放大,縮小,移動,旋轉(zhuǎn),和剪裁。下面我們來做一個完整的demo,剪裁后的圖片以bas...
摘要:實現(xiàn)原理簡單,純技術(shù)處理圖片,幾乎不需要用到相關(guān)知識面向人群急于使用頭像裁剪組件的同學(xué)。裁剪框初始寬高上傳圖片后,裁剪區(qū)將預(yù)設(shè)為最大裁剪范圍。支持矩形裁剪目前九宮僅支持將圖片裁剪為正方形,不能裁剪為矩形,該功能將在后續(xù)優(yōu)化。 項目簡介 本組件是vue下的頭像裁剪組件,可以直接拷貝代碼使用,無需安裝依賴 使用九宮格進行裁剪,自由選擇裁剪區(qū)域。 實時預(yù)覽裁剪后效果。 可以將裁剪好的圖片,...
閱讀 2345·2021-11-11 16:54
閱讀 2596·2021-09-26 09:47
閱讀 3978·2021-09-08 09:36
閱讀 2727·2021-07-25 21:37
閱讀 927·2019-08-30 15:54
閱讀 2540·2019-08-30 14:22
閱讀 3245·2019-08-30 13:57
閱讀 2558·2019-08-29 17:17