關鍵字: imgareaselect 圖片縮放 圖片截圖 php jquery 在開發中難免碰到圖片上傳問題！圖片上傳問題很好解決，而上傳到伺服器上的圖片尺寸大小不一，使表現層無法使用統一的規格顯示被上傳的圖片。
那麼被上傳的圖片的 等比例縮 與等比率放 還有等比率截圖 可能會給我們的開發帶來障礙！
使用 jquery.imgareaselect圖片處理外掛完全可以解決這方面的問題；


jquery.imgareaselect 官方網站：http://odyniec.net/projects/imgareaselect/

例1：

1. $(window).load(
   function  () {  
2.   $('#myimg' ).imgAreaSelect({ selectionColor:  'blue' , selectionOpacity: 0.2,  
3.     borderWidth: 2 });  
4. });  

$(window).load(function () {
  $('#myimg').imgAreaSelect({ selectionColor: 'blue', selectionOpacity: 0.2,
    borderWidth: 2 });
});

myimg:需要處理的圖片
selectionColor:選擇區域顏色
selectionOpacity:選擇區域透明度
borderWidth:選擇層邊框大小
如果使用selectionColor引數  就必須設定selectionOpacity（透明度）

1. $(window).load( function  () {  
2.   $('#myimg' ).imgAreaSelect({aspectRatio:  '4:3' , maxWidth: 400, maxHeight: 300});  
3. });  

$(window).load(function () {
  $('#myimg').imgAreaSelect({aspectRatio: '4:3', maxWidth: 400, maxHeight: 300});
});

myimg:需要處理的圖片
aspectRatio:選擇框寬高比率
maxWidth:選擇區域透寬最大值
maxHeight:選擇區域透高最大值

1. $(window).load( function  () {  
2.   $('#myimg' ).imgAreaSelect({ x1: 0, y1: 0, x2: 400, y2: 300,keys: { arrows: 15, shift: 5 } });  
3. });  

$(window).load(function () {
  $('#myimg').imgAreaSelect({ x1: 0, y1: 0, x2: 400, y2: 300,keys: { arrows: 15, shift: 5 } });
});

myimg:需要處理的圖片
x1:右上角x軸座標
y1:右上角y軸座標
x2:右下角x軸座標
y2:右下角y軸座標
key:開啟鍵盤支援


例4：最關鍵的一個 等比率縮放
實現原理 需要兩個圖片 第一圖是原圖 第二個圖是選擇區域後顯示的圖
         用第一個圖上的選擇座標+css控制 產生第二個圖 實際上兩個圖是一樣的 只不過通  
         過css控制了第二張圖的顯示區域與縮放比率 如果需要實現真正截圖功能必須使用
         伺服器端支援。 例如php  asp aspx jsp ......

程式碼如下

1. function preview(img, selection)  
2. {  
3.   var scaleX = 100  / (selection.width ||  1 );  
4.   var scaleY = 100  / (selection.height ||  1 );  
5.   $('#myimg + div > img' ).css({  
6.     width: Math.round(scaleX * 400 ) +  'px' ,  
7.     height: Math.round(scaleY * 300 ) +  'px' ,  
8.     marginLeft: '-'  + Math.round(scaleX * selection.x1) +  'px' ,  
9.     marginTop: '-'  + Math.round(scaleY * selection.y1) +  'px'
10.   });  
11. }  
12. $(document).ready(function () {  
13.   $('<div><img src="myimg.jpg" style="position: relative;" /></div>' )  
14.     .css({  
15.       float :  'left' ,  
16.       position: 'relative' ,  
17.       overflow: 'hidden' ,  
18.       width: '100px' ,  
19.       height: '100px'
20.     })  
21.     .insertAfter($('#myimg' ));  
22. });  
23. $(window).load(function () {  
24.   $('#myimg' ).imgAreaSelect({ aspectRatio:  '1:1' , onSelectChange: preview });  
25. });  

function preview(img, selection)
{
  var scaleX = 100 / (selection.width || 1);
  var scaleY = 100 / (selection.height || 1);

  $('#myimg + div > img').css({
    width: Math.round(scaleX * 400) + 'px',
    height: Math.round(scaleY * 300) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}

$(document).ready(function () {
  $('<div><img src="myimg.jpg" style="position: relative;" /></div>')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '100px',
      height: '100px'
    })
    .insertAfter($('#myimg'));
});

$(window).load(function () {
  $('#myimg').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
});

myimg:需要處理的圖片
onSelectChange:選擇區域發生變化的時候回撥處理
function preview(img, selection):回撥函式

var scaleX = 100 / (selection.width || 1); 100->新圖的寬
var scaleY = 100 / (selection.height || 1);100->新圖的高



width: Math.round(scaleX * 400) + 'px', 400->原圖的寬
height: Math.round(scaleY * 300) + 'px', 300->原圖的高


$('<div><img src="myimg.jpg" style="position: relative;" /></div>')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '100px',
      height: '100px'
    })

100px 是選擇後新圖顯示區域的寬和高

值得注意的是：

   回撥函式中實際圖的寬高  回撥函式中新圖的寬高
   這些引數必須設定正確、否則會出現 選擇偏差



接下來伺服器端處理 先說 php 如何處理

1. $x  =  $_GET [ 'x' ]; //客戶端選擇區域左上角x軸座標
2. $y  =  $_GET [ 'y' ]; //客戶端選擇區域左上角y軸座標
3. $w  =  $_GET [ 'w' ]; //客戶端選擇區 的寬
4. $h  =  $_GET [ 'h' ]; //客戶端選擇區 的高
5. $filename  =  "c:/myimg" ; //圖片的路徑
6. $im  = imagecreatefromjpeg( $filename ); // 讀取需要處理的圖片
7. $newim  = imagecreatetruecolor(100, 100); //產生新圖片 100 100 為新圖片的寬和高
8. imagecopyresampled($newim ,  $im , 0, 0,  $x ,  $y , 100, 100,  $w ,  $h );  
9. //                  [1]    [2] [3][4] [5] [6] [7]  [8]  [9] [10]
10. //[5]  客戶端選擇區域左上角x軸座標
11. //[6]  客戶端選擇區域左上角y軸座標
12. //[7]  生成新圖片的寬
13. //[8]  生成新圖片的高
14. //[9]  客戶端選擇區 的寬
15. //[10] 客戶端選擇區 的高          
16. imagejpeg($newim ,  $filename );  
17. imagedestroy($im );  
18. imagedestroy($newim );