溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“jQuery插件ImgAreaSelect怎么實現(xiàn)頭像上傳預(yù)覽和裁剪功能”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“jQuery插件ImgAreaSelect怎么實現(xiàn)頭像上傳預(yù)覽和裁剪功能”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
首先，要知道我們應(yīng)該實現(xiàn)什么功能？
（1）圖片能夠?qū)崿F(xiàn)上傳預(yù)覽功能
（2）拖拽裁剪圖片，使其能夠顯示裁剪后的區(qū)域
（3）顯示要裁剪區(qū)域的坐標
其次，該如何引用該插件呢？
那就具體看一下吧！
第一步：先將樣式和文件包引入（根據(jù)你自己的位置引入）
<!--引入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 > 選區(qū)預(yù)覽 </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>第三步：實現(xiàn)圖片的上傳預(yù)覽效果
思路：通過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)){
// 創(chuàng)建一個新的FileReader的實例
var reader = new FileReader();
// 讀取本地文件作為一個DataURL
reader.readAsDataURL(files[0]);
// 當(dāng)加載時,圖像數(shù)據(jù)設(shè)置為背景的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>這樣，就能夠?qū)崿F(xiàn)如下效果：
點擊選擇 ：
第四步：實現(xiàn)區(qū)域選擇功能
<script>
function preview(img, selection)
{
if(!selection.width || !selection.height) //判斷選取區(qū)域不為空
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>這樣就可以實現(xiàn)如下效果啦~~~
到這一步就可以實現(xiàn)頭像的上傳以及裁剪功能了，當(dāng)然后期還要將路徑添加到數(shù)據(jù)庫就更完美了~~~~
（------------------------------------------------------------------------此處應(yīng)有分割線----------------------------------------------------------------------）
如果你只想實現(xiàn)簡單的圖片裁剪功能，那么可以看看下面代碼，此處不做注釋了~~~
當(dāng)然，如果上邊的代碼看不太明白，也可以參照下面的這個進行修改，將圖片上傳預(yù)覽功能添加上即可哈~~~~
效果圖：（對比圖片就可以知道，下面這個就只是少了瀏覽功能，其他完全一樣）
<!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});則選取區(qū)域固定為正方形。
function preview(img, selection)
{
//等同于var scaleX = 100 / (selection.width || 1)
//先對||前面的進行布爾運算,如果結(jié)果是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;
//設(shè)置裁剪后圖片的寬高
$('#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怎么實現(xiàn)頭像上傳預(yù)覽和裁剪功能”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼