上一節隨筆中，我們已經知道了關於jQuery插件ImgAreaSelect基本的知識；那么現在看一下實例：
首先，要知道我們應該實現什么功能？
（1）圖片能夠實現上傳預覽功能
（2）拖拽裁剪圖片，使其能夠顯示裁剪后的區域
（3）顯示要裁剪區域的坐標
其次，該如何引用該插件呢？
那就具體看一下吧！
第一步：先將樣式和文件包引入（根據你自己的位置引入）
<!--引入imgareaselect的css樣式--> <link rel="stylesheet" type="text/css" href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" /> <!--引入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" />
<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>
未完待續，明天還有一個小例子~~~
it's a good day today, hope your Mrs Right is companying with you and the same as the next 520~~~if not, please insist that your Mrs Right is on the way, and maybe on next 520, you will be one of the former~~~~
轉載請標明本博客地址 http://www.cnblogs.com/chenguanai/p/6883401.html#3697090