上一節隨筆中，我們已經知道了關于jQuery插件ImgAreaSelect基本的知識；那么現在看一下實例：
首先，要知道我們應該實現什么功能？
（1）圖片能夠實現上傳預覽功能
（2）拖拽裁剪圖片，使其能夠顯示裁剪后的區域
（3）顯示要裁剪區域的坐標
其次，該如何引用該插件呢？
那就具體看一下吧！
第一步：先將樣式和文件包引入（根據你自己的位置引入）
<!--引入imgareaselect的css樣式--><link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="external nofollow" rel="external nofollow" /><!--引入jquery包--><script type="text/javascript" src="../jquery-1.11.2.min.js"></script><!--引入imgareaselect的js文件--><script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script>
第二步：先用div布局樣式,如下圖所示
<body> <div style="float:left; width:300px;"> <p>親，請上傳圖片并裁剪</p> <div style="width:300px; height:300px;float: left;"> <!--原圖--> <img id="uploadPreview"/> <input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> <!--//對這個按鈕加一個事件--> </div> </div> <div style="float:left; width:300px;"> <p style="font-size:110%; font-weight:bold; padding-left:0.1em;"> 選區預覽 </p> <div style="margin:0 1em; width:100px; height:100px;border: 1px solid black;"> <div id="preview" style="width:100px; height:100px; overflow:hidden;"> <!--裁剪后的圖片--> <img id="tp" style="width:200px; height:200px;"> </div> </div> <!--做一個表格用來放選取圖片的坐標--> <table style="margin-top:1em;"> <thead> <tr> <th colspan="2" style="font-size:110%; font-weight:bold; text-align:left; padding-left: 0.1em;"> 坐標</th> </tr> </thead> <tbody> <tr> <td style="width:10%;"><b>X<sub>1</sub>:</b></td> <td style="width:30%;"><input type="text" id="x1" value="-" /></td> </tr> <tr> <td><b>Y<sub>1</sub>:</b></td> <td><input type="text" id="y1" value="-" /></td> </tr> <tr> <td><b>X<sub>2</sub>:</b></td> <td><input type="text" id="x2" value="-" /></td> </tr> <tr> <td><b>Y<sub>2</sub>:</b></td> <td><input type="text" id="y2" value="-" /></td> </tr> </tbody> </table> </div> </div> </body>
css樣式：
<style> #uploadPreview { width: 170px; height: 170px; background-position: center center; background-size: cover; border: 1px solid brown; -webkit-box-shadow: 0 0 0px 0px rgba(0, 0, 0, 0); display: inline-block; } </style>第三步：實現圖片的上傳預覽效果
思路：通過input 將圖片的 src傳給第一個img，然后再將第一個img的src傳給第二個img的src
<script> //通過input將圖片路徑傳給第一個img$("#uploadImage").on("change", function(){ // 得到一個參考文件列表 var files = !!this.files ? this.files : []; // 如果沒有選擇任何文件,或者沒有文件讀到就返回 if (!files.length || !window.FileReader) return; // 只有進行選擇的文件是一個形象 if (/^image/.test( files[0].type)){ // 創建一個新的FileReader的實例 var reader = new FileReader(); // 讀取本地文件作為一個DataURL reader.readAsDataURL(files[0]); // 當加載時,圖像數據設置為背景的div reader.onloadend = function(){ //給第一個img添加路徑 $("#uploadPreview").attr("src",this.result); //給第二個img添加路徑 $("#tp").attr("src",this.result); //開啟裁剪功能 $('#uploadPreview ').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview}); } }});</script>這樣，就能夠實現如下效果：
點擊瀏覽
點擊選擇 ：
第四步：實現區域選擇功能
<script> function preview(img, selection) { if(!selection.width || !selection.height) //判斷選取區域不為空 return; //分別取高寬比率 var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; var img = new Image(); //傳路徑 img.src = document.getElementById('uploadPreview').src; //給裁剪的圖片定義高和寬 $('#preview img').css( { width : Math.round(scaleX * 170), //170為第一個img的寬，不然截取的圖片會有所缺失，可以自己試試 height: Math.round(scaleY * 170), //170為第一個img的高 marginLeft: -Math.round(scaleX * selection.x1), marginTop: -Math.round(scaleY * selection.y1) }); //顯示坐標 $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); } </script>這樣就可以實現如下效果啦~~~
到這一步就可以實現頭像的上傳以及裁剪功能了，當然后期還要將路徑添加到數據庫就更完美了~~~~
（------------------------------------------------------------------------此處應有分割線----------------------------------------------------------------------）
如果你只想實現簡單的圖片裁剪功能，那么可以看看下面代碼，此處不做注釋了~~~
當然，如果上邊的代碼看不太明白，也可以參照下面的這個進行修改，將圖片上傳預覽功能添加上即可哈~~~~
效果圖：（對比圖片就可以知道，下面這個就只是少了瀏覽功能，其他完全一樣）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--在HTML頭部加入：--> <link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="external nofollow" rel="external nofollow" /> <script type="text/javascript" src="../jquery-1.11.2.min.js"></script> <script type="text/javascript" src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#photo').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview}); });// 如果加上aspectRatio: '1:1'，$('#photo').imgAreaSelect( {aspectRatio: '1:1',handles:true, fadeSpeed:200, onSelectEnd : preview});則選取區域固定為正方形。 function preview(img, selection) { //等同于var scaleX = 100 / (selection.width || 1) //先對||前面的進行布爾運算,如果結果是true(即width存在且不是0),就使用width,否則使用||后的變量1 //也就是先檢查 selection.width 有沒有值，有的話就用 100 / 該值再付給 scaleX，沒的話就用 100 / 1 來賦值； if(!selection.width || !selection.height) return; var scaleX = 100 / selection.width; var scaleY = 100 / selection.height; //設置裁剪后圖片的寬高 $('#preview img').css( { width : Math.round(scaleX * 200), height: Math.round(scaleY * 200), marginLeft: -Math.round(scaleX * selection.x1), marginTop: -Math.round(scaleY * selection.y1) }); $('#x1').val(selection.x1); $('#y1').val(selection.y1); $('#x2').val(selection.x2); $('#y2').val(selection.y2); $('w').val(selection.width); $('h').val(selection.height); } </script> </head> <body> <div> <!--選取的圖片--> <div style="float:left; width:70%;"> <p> Click and drag on the image to select an area. </p> <div style="margin:0 0.3em; width:200px; height:200px;"> <img id="photo" src="./images/1.jpg" style="width:200px; height:200px;"/> </div> </div> <!--截取的圖片--> <div style="float:left; width:30%;"> <p style="font-size:110%; font-weight:bold; padding-left:0.1em;"> Selection Preview </p> <div style="margin:0 1em; width:100px; height:100px;"> <div id="preview" style="width:100px; height:100px; overflow:hidden;"> <img src="./images/1.jpg" style="width:200px; height:200px;"> </div> </div> <table style="margin-top:1em;"> <thead> <tr> <th colspan="2" style="font-size:110%; font-weight:bold; text-align:left; padding-left: 0.1em;"> Coordinates</th> </tr> </thead> <tbody> <tr> <td style="width:10%;"><b>X<sub>1</sub>:</b></td> <td style="width:30%;"><input type="text" id="x1" value="-" /></td> </tr> <tr> <td><b>Y<sub>1</sub>:</b></td> <td><input type="text" id="y1" value="-" /></td> </tr> <tr> <td><b>X<sub>2</sub>:</b></td> <td><input type="text" id="x2" value="-" /></td> </tr> <tr> <td><b>Y<sub>2</sub>:</b></td> <td><input type="text" id="y2" value="-" /></td> </tr> </tbody> </table> </div> </div> </body></html>以上所述是小編給大家介紹的jQuery插件ImgAreaSelect實現頭像上傳預覽和裁剪功能實例講解一，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
