在开发中难免碰到图片上传问题!图片上传问题很好解决,而上传到服务器上的图片尺寸大小不一,使表现层无法使用统一的规格显示被上传的图片。
那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍!
使用 jquery.imgareaselect图片处理插件完全可以解决这方面的问题;
jquery.imgareaselect 官方网站:http://odyniec.net/projects/imgareaselect/
例1:
$(window).load(function () {
$('#myimg').imgAreaSelect({ selectionColor: 'blue', selectionOpacity: 0.2,
borderWidth: 2 });
});
myimg:需要处理的图片
selectionColor:选择区域颜色
selectionOpacity:选择区域透明度
borderWidth:选择层边框大小
如果使用selectionColor参数 就必须设置selectionOpacity(透明度)
例2:等比率选择 并设置选择区域最大宽高
$(window).load(function () {
$('#myimg').imgAreaSelect({aspectRatio: '4:3', maxWidth: 400, maxHeight: 300});
});
myimg:需要处理的图片
aspectRatio:选择框宽高比率
maxWidth:选择区域透宽最大值
maxHeight:选择区域透高最大值
例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 ......
代码如下
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);
分享到:
相关推荐
jquery.imgareaselect-0.8.min.js
jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装jquery.imgareaselect-0.9.2封装
这是利用jquery的imgareaselect进行截图的插件,使用代码请看我博客
jquery.imgareaselect-0.9.10图片裁切插件下载,可把上传的图片进行裁剪再保存,在以前来说非常棘手的问题,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现图片裁切功能。注,本插件包内不包括...
jquery.imgareaselect是一个图像上传于裁剪的java代码
关于ImgAreaSelect, 是一jQuery插件,它支持用户通过鼠标拖曳选择图片的一部分,如图片拖曳、图片编辑等。下面通过本文给大家介绍jQuery插件imgAreaSelect基础讲解,需要的的朋友参考下吧
jQuery插件imgAreaSelect 实例代码,自己实践后的代码,很简单的代码,完成了图片上传、剪切的功能,很不错,推荐。
jquery_imgareaselect图片裁切插件使用的中文文档
jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像
利用jquery的imgAreaSelect插件实现图片裁剪示例
jquery的imgareaselect插件
jquery1.8.0 和 .imgareaselect控件共同实现突破的裁剪。代码已经测试通过
jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图jquery imgareaselect截图
使用JQuery ImgAreaSelect插件实现图片在线剪裁并保存到ASP.NET服务器端实例。
javascript截图 jQuery插件imgAreaSelect用法详解_.docx
基于jquery(imgareaselect)的网页截图插件,完整项目。可在eclipse中直接运行
imgAreaSelect_Demo 从官方的教程做了个
个人网上收集,一共三个: ImgCropper jquery.imgareaselect BitmapCutter 在此给大家分享了!
Jsp图片预览程序 imgAreaSelect 是由 Michal Wojciechowski开发的一款非常好用的jquery插件,实现了图片的截取功能。其文档和Demo也是很详尽的。大家可以到http://odyniec.net/projects/imgareaselect/了解更多的细节...
基于jquery.imgareaselect-0.9.10截图上传,包含PHP代码