使用JCrop進行圖片裁剪，裁剪js說明，裁剪預覽，裁剪上傳，裁剪設計的圖片處理的工具類和程式碼
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow
也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
1.要想製作圖片裁剪功能，可以使用網上的裁剪工具JCrop，網址是：https://github.com/tapmodo/Jcrop/
案例效果如下：
2.引入JCrop的js程式碼，具體要引入那些js可以參考JCrop案例:
3.編寫的html程式碼如下：
| <div id="light" class="white_content"> <div class="vatitlee"> 封面擷取 <div class="guan"> <a href="javascript:void(0)" </div> </div>
<div class="tailoringc"> <div class="tailoringl"> <img id="jcrop_target" src="<c:url value="/resources/cartoon2/images/images/banner7.jpg"/>" width="280" height="553" /> </div>
<div class="tailoringr" style='overflow: hidden;'> <img id="cutImgId" src="<c:url value="/resources/cartoon2/images/images/banner7.jpg"/>" width="280" height="553" /> </div>
<div class="clear"></div> </div> <div class="tailoringb"> <a class="button" href="javascript:void(0)" onclick="saveUploadImg()">裁剪</a> <a href="javascript:void(0)" class="button" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</a> </div> </div> |
4編寫JS程式碼（注意這裡的280和175表示的是我要一張長為280px畫素高175px畫素的圖片）：
| //封面上傳,截圖 //上傳後返回的檔名 var filename; var fileid; //裁剪主要用到了jcrop_api var jcrop_api,boundx,boundy; //原始檔名稱 var originalfilename; //實際圖片的寬高 var imgweight,imgheight; //dx：實際圖片寬/顯示寬度 //dy: 實際圖片高/顯示高度 //scale:最終縮放比 // var dx,dy,scale = 1; // var displayW = 175, displayH = 350; var imgObj = new Image();
$(function() { init(); });
function init() { //檔案上傳的js元件(FileUpload的js元件) $('#uploadCover').fileupload({ dataType: 'json', //autoUpload: true, url:'/contentAffix/upTemp',
done: function (e, data) { if(jcrop_api!=null){ jcrop_api.destroy(); } $.each(data.result, function (index, file) { if(index=='filedesc') { //獲取檔名稱 filename=file.filename; //實際的檔案高度 imgweight = file.imgweight; //實際的檔案寬度 imgheight = file.imgheight;
// //設定縮放比例 // dx = imgweight / displayW; // dy = imgheight / displayH; // if(dx > dy && dy > 1) { // scale = dx; // // } // if(dy > dx && dx > 1) { // scale = dy; // } // // displayW = imgweight / scale; // displayH = imgheight / scale;
// $("#jcrop_target").css({ // width:displayW + 'px', // height:displayH + 'px' // }); // $(".tailoringc .tailoringl").css({ // width:(displayW + 2) + 'px', // height:(displayH + 2) + 'px' // });
originalfilename = file.originalfilename; fileid=file.id; $('#light').show(); $('#fade').show();
var imgurl = file.filepath+'/'+file.filename; $('#jcrop_target').attr('src',imgurl); $('#cutImgId').attr('src',imgurl);
cutPic(); //重新載入影象到jcrop，才能小圖上正確顯示截圖位置 //jcrop_api.setImage(imgurl); } }); }, }); $("#pickCover").click(function () { $("#uploadCover").trigger('click'); });
$('body').data('filelist', new Array()); }
//點選裁剪時做的操作 //傳遞到後臺的是最終在實際圖片上的位置和寬高 function saveUploadImg(){ c = jcrop_api.tellSelect(); if (parseInt(c.w) > 0) { $.ajax({ url:'/cartoon-web/contentAffix/cutimageAndSaveAffix', data :{"pointx":Math.round(c.x * imgweight / 280),"pointy":Math.round(c.y * imgheight / 350),"pointw":Math.round(c.w * imgweight / 280),"pointh":Math.round(c.h * imgheight / 350),"filename":filename,"fileid":fileid,"originalfilename":originalfilename}, dataType:'json',
success: function(data){ if(data.result == "success"){ $("#fmimg").attr('src', data.cropImgPath+"?r="+new Date().getTime());
$('input[type=hidden][name=coverAffixId]').val(fileid);
$('#light').hide(); |