[ php or jsp ] + jquery.imgareaselect 處理圖片截圖等比縮放!
關鍵字: imgareaselect 圖片縮放 圖片截圖 php jquery
在開發中難免碰到圖片上傳問題!圖片上傳問題很好解決,而上傳到伺服器上的圖片尺寸大小不一,使表現層無法使用統一的規格顯示被上傳的圖片。
那麼被上傳的圖片的 等比例縮 與等比率放 還有等比率截圖 可能會給我們的開發帶來障礙!
使用 jquery.imgareaselect圖片處理外掛完全可以解決這方面的問題;
jquery.imgareaselect 官方網站:http://odyniec.net/projects/imgareaselect/
例1:
- $(window).load(
- $('#myimg' ).imgAreaSelect({ selectionColor: 'blue' , selectionOpacity: 0.2,
- borderWidth: 2 });
- });
$(window).load(function () {
$('#myimg').imgAreaSelect({ selectionColor: 'blue', selectionOpacity: 0.2,
borderWidth: 2 });
});
myimg:需要處理的圖片
selectionColor:選擇區域顏色
selectionOpacity:選擇區域透明度
borderWidth:選擇層邊框大小
如果使用selectionColor引數 就必須設定selectionOpacity(透明度)
例2:等比率選擇 並設定選擇區域最大寬高
Javascript程式碼
- $(window).load( function () {
- $('#myimg' ).imgAreaSelect({aspectRatio: '4:3' , maxWidth: 400, maxHeight: 300});
- });
$(window).load(function () {
$('#myimg').imgAreaSelect({aspectRatio: '4:3', maxWidth: 400, maxHeight: 300});
});
myimg:需要處理的圖片
aspectRatio:選擇框寬高比率
maxWidth:選擇區域透寬最大值
maxHeight:選擇區域透高最大值
例3:預設選擇區域設定 與 鍵盤支援 Javascript程式碼
- $(window).load( function () {
- $('#myimg' ).imgAreaSelect({ x1: 0, y1: 0, x2: 400, y2: 300,keys: { arrows: 15, shift: 5 } });
- });
$(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 ......
程式碼如下
- 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 });
- });
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 如何處理
- $x = $_GET [ 'x' ]; //客戶端選擇區域左上角x軸座標
- $y = $_GET [ 'y' ]; //客戶端選擇區域左上角y軸座標
- $w = $_GET [ 'w' ]; //客戶端選擇區 的寬
- $h = $_GET [ 'h' ]; //客戶端選擇區 的高
- $filename = "c:/myimg" ; //圖片的路徑
- $im = imagecreatefromjpeg( $filename ); // 讀取需要處理的圖片
- $newim = imagecreatetruecolor(100, 100); //產生新圖片 100 100 為新圖片的寬和高
- imagecopyresampled($newim , $im , 0, 0, $x , $y , 100, 100, $w , $h );
- // [1] [2] [3][4] [5] [6] [7] [8] [9] [10]
- //[5] 客戶端選擇區域左上角x軸座標
- //[6] 客戶端選擇區域左上角y軸座標
- //[7] 生成新圖片的寬
- //[8] 生成新圖片的高
- //[9] 客戶端選擇區 的寬
- //[10] 客戶端選擇區 的高
- imagejpeg($newim , $filename );
- imagedestroy($im );
- imagedestroy($newim
);