越简单越好!

[ php or jsp ] + jquery.imgareaselect 处理图片截图等比缩放!

bevin 发表于 2009-06-10 17:42 | 22次阅读 0次推荐   JavaScript
在开发中难免碰到图片上传问题!图片上传问题很好解决,而上传到服务器上的图片尺寸大小不一,使表现层无法使用统一的规格显示被上传的图片。
那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍!
使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题;


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

例1:

Javascript代码 复制代码
  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(透明度)


例2:等比率选择 并设置选择区域最大宽高

Javascript代码 复制代码
  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:选择区域透高最大值

例3:默认选择区域设置 与 键盘支持
Javascript代码 复制代码
  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 ......

代码如下
Java代码 复制代码
  1. function preview(img, selection)   
  2. {   
  3.    var scaleX = 100 / (selection.width || 1);   
  4.    var scaleY = 100 / (selection.height || 1);   
  5.   
  6.    $('#myimg + div > img').css({   
  7.      width: Math.round(scaleX * 400) + 'px',   
  8.      height: Math.round(scaleY * 300) + 'px',   
  9.      marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',   
  10.      marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'  
  11.    });   
  12. }   
  13.   
  14. $(document).ready(function () {   
  15.    $('<div><img src="myimg.jpg" style="position: relative;" /></div>')   
  16.      .css({   
  17.       float: 'left',   
  18.        position: 'relative',   
  19.        overflow: 'hidden',   
  20.        width: '100px',   
  21.        height: '100px'  
  22.      })   
  23.      .insertAfter($('#myimg'));   
  24. });   
  25.   
  26. $(window).load(function () {   
  27.    $('#myimg').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });   
  28. });  
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 如何处理
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.   
  9. imagecopyresampled($newim, $im, 0, 0, $x, $y, 100, 100, $w, $h);   
  10. //                   [1]     [2] [3][4] [5] [6] [7]   [8]   [9] [10]   
  11. //[5]   客户端选择区域左上角x轴坐标   
  12. //[6]   客户端选择区域左上角y轴坐标   
  13. //[7]   生成新图片的宽   
  14. //[8]   生成新图片的高   
  15. //[9]   客户端选择区 的宽   
  16. //[10] 客户端选择区 的高             
  17. imagejpeg($newim, $filename);   
  18. imagedestroy($im);   
  19. imagedestroy($newim);  
$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);

imgareaselect.rar (285.7 KB)

+0
发表评论
×您的大名会显示在评论处

评论内容不能少于5个字哦~~~

评论列表
当前暂无评论
发送数据中... 请求错误. 请输入评论内容和验证码后再发布 您已经参与过了,谢谢
返回顶部 ^