溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下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 > <p>親，請上傳圖片并裁剪</p> <div > <!--原圖--> <img id="uploadPreview"/> <input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> <!--//對這個按鈕加一個事件--> </div> </div> <div > <p > 選區預覽 </p> <div > <div id="preview" > <!--裁剪后的圖片--> <img id="tp" > </div> </div> <!--做一個表格用來放選取圖片的坐標--> <table > <thead> <tr> <th colspan="2" > 坐標</th> </tr> </thead> <tbody> <tr> <td ><b>X<sub>1</sub>:</b></td> <td ><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 >
<p>
Click and drag on the image to select an area.
</p>
<div >
<img id="photo" src="./images/1.jpg" />
</div>
</div>
<!--截取的圖片-->
<div >
<p >
Selection Preview
</p>
<div >
<div id="preview" >
<img src="./images/1.jpg" >
</div>
</div>
<table >
<thead>
<tr>
<th colspan="2" > Coordinates</th>
</tr>
</thead>
<tbody>
<tr>
<td ><b>X<sub>1</sub>:</b></td>
<td ><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如何實現頭像上傳預覽和裁剪功能”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
