jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一
更新時(shí)間：2017年05月26日 14:41:46 作者：小魚小魚加油吐泡泡
這篇文章主要介紹了jQuery插件ImgAreaSelect實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一,需要的朋友可以參考下
上一節(jié)隨筆中，我們已經(jīng)知道了關(guān)于jQuery插件ImgAreaSelect基本的知識(shí)；那么現(xiàn)在看一下實(shí)例：
首先，要知道我們應(yīng)該實(shí)現(xiàn)什么功能？
（1）圖片能夠?qū)崿F(xiàn)上傳預(yù)覽功能
（2）拖拽裁剪圖片，使其能夠顯示裁剪后的區(qū)域
（3）顯示要裁剪區(qū)域的坐標(biāo)
其次，該如何引用該插件呢？
那就具體看一下吧！
第一步：先將樣式和文件包引入（根據(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 style="float:left; width:300px;"> <p>親，請(qǐng)上傳圖片并裁剪</p> <div style="width:300px; height:300px;float: left;"> <!--原圖--> <img id="uploadPreview"/> <input id="uploadImage" type="file" name="photoimage" class="fimg1" onchange="PreviewImage();" /> <!--//對(duì)這個(gè)按鈕加一個(gè)事件--> </div> </div> <div style="float:left; width:300px;"> <p style="font-size:110%; font-weight:bold; padding-left:0.1em;"> 選區(qū)預(yù)覽 </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> <!--做一個(gè)表格用來放選取圖片的坐標(biāo)--> <table style="margin-top:1em;"> <thead> <tr> <th colspan="2" style="font-size:110%; font-weight:bold; text-align:left; padding-left: 0.1em;"> 坐標(biāo)</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>
第三步：實(shí)現(xiàn)圖片的上傳預(yù)覽效果
思路：通過input 將圖片的 src傳給第一個(gè)img，然后再將第一個(gè)img的src傳給第二個(gè)img的src
<script>
//通過input將圖片路徑傳給第一個(gè)img
$("#uploadImage").on("change", function(){
// 得到一個(gè)參考文件列表
var files = !!this.files ? this.files : [];
// 如果沒有選擇任何文件,或者沒有文件讀到就返回
if (!files.length || !window.FileReader) return;
// 只有進(jìn)行選擇的文件是一個(gè)形象
if (/^image/.test( files[0].type)){
// 創(chuàng)建一個(gè)新的FileReader的實(shí)例
var reader = new FileReader();
// 讀取本地文件作為一個(gè)DataURL
reader.readAsDataURL(files[0]);
// 當(dāng)加載時(shí),圖像數(shù)據(jù)設(shè)置為背景的div
reader.onloadend = function(){
//給第一個(gè)img添加路徑
$("#uploadPreview").attr("src",this.result);
//給第二個(gè)img添加路徑
$("#tp").attr("src",this.result);
//開啟裁剪功能
$('#uploadPreview ').imgAreaSelect( {handles:true, fadeSpeed:200, onSelectEnd : preview});
}
}
});
</script>
這樣，就能夠?qū)崿F(xiàn)如下效果：
點(diǎn)擊瀏覽
點(diǎn)擊選擇 ：
第四步：實(shí)現(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為第一個(gè)img的寬，不然截取的圖片會(huì)有所缺失，可以自己試試
height: Math.round(scaleY * 170), //170為第一個(gè)img的高
marginLeft: -Math.round(scaleX * selection.x1),
marginTop: -Math.round(scaleY * selection.y1)
});
//顯示坐標(biāo)
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
}
</script>
這樣就可以實(shí)現(xiàn)如下效果啦~~~
到這一步就可以實(shí)現(xiàn)頭像的上傳以及裁剪功能了，當(dāng)然后期還要將路徑添加到數(shù)據(jù)庫(kù)就更完美了~~~~
（------------------------------------------------------------------------此處應(yīng)有分割線----------------------------------------------------------------------）
如果你只想實(shí)現(xiàn)簡(jiǎn)單的圖片裁剪功能，那么可以看看下面代碼，此處不做注釋了~~~
當(dāng)然，如果上邊的代碼看不太明白，也可以參照下面的這個(gè)進(jìn)行修改，將圖片上傳預(yù)覽功能添加上即可哈~~~~
效果圖：（對(duì)比圖片就可以知道，下面這個(gè)就只是少了瀏覽功能，其他完全一樣）
<!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)
//先對(duì)||前面的進(jìn)行布爾運(yùn)算,如果結(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 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實(shí)現(xiàn)頭像上傳預(yù)覽和裁剪功能實(shí)例講解一，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- struts2+jsp+jquery+Jcrop實(shí)現(xiàn)圖片裁剪并上傳實(shí)例
- 利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（同步顯示圖像位置信息）
- 利用jQuery插件imgAreaSelect實(shí)現(xiàn)圖片上傳裁剪（放大縮小）
- jquery.Jcrop結(jié)合JAVA后臺(tái)實(shí)現(xiàn)圖片裁剪上傳實(shí)例
- jQuery實(shí)現(xiàn)圖片上傳和裁剪插件Croppie
- jQuery插件jcrop+Fileapi完美實(shí)現(xiàn)圖片上傳+裁剪+預(yù)覽的代碼分享
- jQuery+PHP實(shí)現(xiàn)上傳裁剪圖片
相關(guān)文章
這篇文章主要介紹了jQuery中size()方法用法,實(shí)例分析了size()方法返回對(duì)象集合中元素?cái)?shù)目的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
jquery多行滾動(dòng)/向左或向上滾動(dòng)/響應(yīng)鼠標(biāo)實(shí)現(xiàn)思路及代碼
多行滾動(dòng)jQuery循環(huán)新聞列表代碼包括以下功能:鼠標(biāo)滑上焦點(diǎn)圖時(shí)停止自動(dòng)播放/滑出時(shí)開始自動(dòng)播放以及判斷執(zhí)行橫向或縱向滾動(dòng),感興趣的朋友可以了解下哦2013-01-01
詳談Ajax請(qǐng)求中的async:false/true的作用(ajax 在外部調(diào)用問題)
下面小編就為大家?guī)硪黄斦凙jax請(qǐng)求中的async:false/true的作用(ajax返回值在外部調(diào)用問題)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法詳解
這篇文章主要介紹了jquery遍歷之parent()和parents()的區(qū)別及parentsUntil()方法。需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jquery特效，實(shí)現(xiàn)點(diǎn)擊展示與隱藏全文特效，實(shí)現(xiàn)方法很簡(jiǎn)單，具有一定的借鑒參考價(jià)值，感興趣的小朋友可以參考一下2015-12-12
jQuery實(shí)現(xiàn)指定內(nèi)容滾動(dòng)同時(shí)左側(cè)或其它地方不滾動(dòng)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)指定內(nèi)容滾動(dòng)同時(shí)左側(cè)或其它地方不滾動(dòng)的方法,可實(shí)現(xiàn)頁面滾動(dòng)的時(shí)候指定位置懸浮固定的效果,涉及jquery針對(duì)頁面元素屬性的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2015-08-08
JavaScript對(duì)象之間的轉(zhuǎn)換 jQuery對(duì)象和原聲DOM
jQuery對(duì)象和原聲DOM，JavaScript對(duì)象之間的轉(zhuǎn)換，學(xué)習(xí)jquery的朋友可以參考下。2011-03-03
使用jQuery實(shí)現(xiàn)購(gòu)物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購(gòu)物車結(jié)算功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
jquery彈窗時(shí)禁止body滾動(dòng)條滾動(dòng)的例子
今天小編就為大家分享一篇jquery彈窗時(shí)禁止body滾動(dòng)條滾動(dòng)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索
這篇文章主要為大家詳細(xì)介紹了jQuery-App輸入框?qū)崿F(xiàn)實(shí)時(shí)搜索，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11