圖片上傳裁剪這功能隨處可見，有的自己寫，不過太耗費(fèi)時間了，插件的話感覺好多，前段時間就想挑一款好的插件，以后就用那款，可是挑了幾款插件用上去，效果很好，問題就出在合并了，單一的插件效果是很好的，沒問題，不然人家也不用吃飯了，可是當(dāng)我把這幾款插件合并一起用的時候就各種奇怪的問題出來了，決解了一個又跑出一個來了，最后挑了好半天發(fā)現(xiàn)了一款還好用的，就趕緊的記錄下來了，不然以后要用又要找，麻煩死了，浪費(fèi)時間啊，所以記錄一下心得，一步到位。

第一步：html代碼

<script src="~/Scripts/jquery-1.10.2.min.js"></script><!--要9.0以上的版本--> <script src="~/js/jquery.form.js"></script><!--一步上傳提交（上傳）此插件不是裁剪，屬于另外下載的，為了方便異步上傳提交--> <link href="~/css/bootstrap.min.css" rel="stylesheet" /> <link href="~/css/cropper.css" rel="stylesheet" /> <link href="~/css/docs.css" rel="stylesheet" /> <script src="~/js/bootstrap.min.js"></script> <script src="~/js/cropper.js"></script><!--裁剪上傳 http://fengyuanchen.github.io/cropper/ --><form action="#" id="form_upload" method="post"><label style="width:60px;height:30px;" for="inputImage" title="打開圖片"><input class="hide" id="inputImage" name="file" type="file" accept="image/*">瀏覽...</label><!--上傳提示--><div class="upload_tag"></div><div style="margin-top:10px;"><div style="width:100px;height:100px;"><img alt="Picture" class="cropper" src="/images/background1.jpg" /></div><br /><br /><div class="preview preview-lg"></div></div><br /><br /><div><input type="submit" value="上傳" class="btn upload_point btn-primary" style="width:60px;height:30px;" /></div> </form> View Code

第二步：docs.js代碼

$(function () {var $image = $(".cropper"),$dataX = $("#dataX"),$dataY = $("#dataY"),$dataHeight = $("#dataHeight"),$dataWidth = $("#dataWidth"),//console = window.console || { log: $.noop },cropper;$image.cropper({aspectRatio: 1,//縱橫比例string/number,默認(rèn)auto,1表示正方形,16/4表示長方形autoCropArea: 0.3,//0和1之間的數(shù)。定義自動裁剪區(qū)域的大小（百分比）zoomLevel: 1,//縮放級別//data: {//只支持四個屬性：“x”，“y”，“width”和“height”,默認(rèn)情況下裁剪區(qū)將出現(xiàn)在圖像的中心。// x: 420,// y: 50,// width: 100,// height: 100//},preview: ".preview",//jQuery選擇器預(yù)覽，添加額外的元素,預(yù)覽區(qū)域modal: true,//區(qū)分裁剪區(qū)和背景dashed: true,//設(shè)置裁剪區(qū)的方格虛線autoCrop: true,//是否自動顯示裁剪區(qū)dragCrop: true,//使刪除當(dāng)前裁剪區(qū)，通過拖動在圖像上創(chuàng)建一個新的dashed: true,modal: true,movable: true,//移動裁剪區(qū)resizable: true,//調(diào)整裁剪區(qū)zoomable: true,//放大圖片rotatable: true,//旋轉(zhuǎn)圖片checkImageOrigin: true,//檢查圖像的來源，如果它是一個跨原產(chǎn)地形象,crossorigin屬性將被添加到圖像元素使“旋轉(zhuǎn)”和“getdataurl”//maxWidth: 100,//裁剪區(qū)//maxHeight: 100,//minWidth: 100,//minHeight: 100,done: function (data) {//區(qū)域變化時觸發(fā)$dataX.val(data.x);$dataY.val(data.y);$dataHeight.val(data.height);$dataWidth.val(data.width);},build: function (e) {//創(chuàng)建裁剪區(qū)之前觸發(fā)},built: function (e) {//創(chuàng)建裁剪區(qū)之后觸發(fā)$image.cropper("zoom", -1);},dragstart: function (e) {//裁剪區(qū)移動之前觸發(fā)},dragmove: function (e) {//裁剪區(qū)移動之時觸發(fā)},dragend: function (e) {//裁剪區(qū)移動之后觸發(fā)}});$("#zoomOut").click(function () {$image.cropper("zoom", -1);});var $inputImage = $("#inputImage");if (window.FileReader) {//選擇圖片$inputImage.change(function () {var fileReader = new FileReader(),files = this.files,file;if (!files.length) {return;}file = files[0];if (/^image\/\w+$/.test(file.type)) {fileReader.readAsDataURL(file);fileReader.onload = function () {$image.cropper("reset", true).cropper("replace", this.result).css("width","100px");$inputImage.val("");};} else {showMessage("請選擇圖片.");}});} else {$inputImage.addClass("hide");}});//上傳代碼 $(".upload_point").click(function () {//alert($(".cropper").cropper("getDataURL"), type); return false;$("#form_upload").ajaxSubmit({url: "/Home/ProcessRequest",type: "post",dataType: "text",data: { "getDataURL": $(".cropper").cropper("getDataURL",{width: 50,height: 50}) },//表示把base64的圖片字符格式提交到后臺success: function (data) {$(".upload_tag").text(data).css({"color":"green","display":"block"});}, error: function () {$(".upload_tag").text("上傳異常，請刷新或重新登錄").css({ "color": "red", "display": "block" });}});return false; }); View Code

第三步：后臺代碼

1 [HttpPost] 2 public string ProcessRequest(FormCollection f) 3 { 4 try 5 { 6 string byteStr = f["getDataURL"].ToString();//data:image/png;base64, 7 int delLength = byteStr.IndexOf(',') + 1; 8 string str = byteStr.Substring(delLength, byteStr.Length - delLength); 9 Image returnImage = Base64StringToImage(str); 10 11 returnImage.Save(Server.MapPath("/images/head/") + Guid.NewGuid() + ".jpg", 12 13 System.Drawing.Imaging.ImageFormat.Jpeg); 14 } 15 catch (Exception) 16 { 17 return "上傳失敗"; 18 } 19 return "上傳成功"; 20 } 21 //base64編碼的文本 轉(zhuǎn)為 圖片 22 private Image Base64StringToImage(string txt) 23 { 24 byte[] arr = Convert.FromBase64String(txt); 25 MemoryStream ms = new MemoryStream(arr); 26 Bitmap bmp = new Bitmap(ms); 27 return bmp; 28 } View Code

轉(zhuǎn)載于:https://www.cnblogs.com/LiuZhen/p/4206295.html

總結(jié)

以上是生活随笔為你收集整理的图片裁剪和异步上传插件--一步到位（记录）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。