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

最新推荐文章于 2021-03-17 05:52:21 发布

y3y4loveyou

最新推荐文章于 2021-03-17 05:52:21 发布

阅读量1.1k

点赞数

文章标签： php jsp function javascript float 服务器

关键字: imgareaselect 图片缩放图片截图 php jquery 在开发中难免碰到图片上传问题！图片上传问题很好解决，而上传到服务器上的图片尺寸大小不一，使表现层无法使用统一的规格显示被上传的图片。
那么被上传的图片的等比例缩与等比率放还有等比率截图可能会给我们的开发带来障碍！
使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题；

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

例1：

Javascript代码

$(window).load( function () {
$('#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 ......

代码如下

Java代码

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 如何处理