jQuery插件ImgAreaSelect 實例講解一（頭像上傳預覽和裁剪功能）

時間 2019-11-18

標籤 jquery 插件 imgareaselect 實例講解頭像上傳預覽裁剪功能欄目 JQuery 简体版

原文原文鏈接

上一節隨筆中，咱們已經知道了關於jQuery插件ImgAreaSelect基本的知識；那麼如今看一下實例：javascript

首先，要知道咱們應該實現什麼功能？php

（1）圖片可以實現上傳預覽功能css

（2）拖拽裁剪圖片，使其可以顯示裁剪後的區域html

（3）顯示要裁剪區域的座標java

其次，該如何引用該插件呢？jquery

那就具體看一下吧！web

第一步：先將樣式和文件包引入（根據你本身的位置引入）數據庫

<!--引入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樣式：this

	<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