在开发中难免碰到图片上传问题!图片上传问题很好解决,而上传到服务器上的图片尺寸大小不一,使表现层无法使用统一的规格显示被上传的图片。
那么被上传的图片的 等比例缩 与等比率放 还有等比率截图 可能会给我们的开发带来障碍!
使用 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.9.2封装详解》 在网页开发中,图像选取功能是常见的需求之一,尤其在图像处理、编辑或上传场景中。jQuery.imgAreaSelect是一款非常实用的jQuery插件,用于实现图像区域选择的功能,它允许...
jquery.imgareaselect-0.8.min.js
《jQuery的imgAreaSelect截图插件深度解析》 在网页开发中,我们常常需要实现图片的裁剪功能,以便用户可以自由选择感兴趣的部分进行保存或处理。jQuery的imgAreaSelect插件为此提供了一个简单易用的解决方案。这篇...
《jQuery.imgAreaSelect:图像上传与裁剪的高效解决方案》 在Web开发中,尤其是在涉及到用户交互和多媒体处理时,图像上传与裁剪功能是非常常见且重要的。jQuery.imgareaselect是一个专门针对这一需求的JavaScript...
jquery.imgareaselect-0.9.10图片裁切插件下载,可把上传的图片进行裁剪再保存,在以前来说非常棘手的问题,现在借助jquery的imgareaselect插件再配合PHP的GD库就可以轻松的实现图片裁切功能。注,本插件包内不包括...
在网页开发中,图片裁剪是一项常见的功能,用于让用户自定义选择图片的显示区域或预览效果。...通过合理配置和使用,开发者可以轻松集成这一功能到自己的项目中,提高用户体验,同时也减轻了服务器端的图片处理负担。
jQuery的imgAreaSelect插件正是一款强大的图片选区工具,它提供了简单易用的API,帮助开发者轻松实现这一功能。下面我们将深入探讨imgAreaSelect插件的原理、使用方法以及一些实用技巧。 **一、插件简介** ...
`imgAreaSelect`是一个基于jQuery的插件,它提供了在网页上选择图片区域的功能,常用于图片裁剪或选取特定部分。这个插件易于集成,灵活性高,且适用于各种项目,特别是那些需要用户自定义图片裁剪范围的应用。 ###...
### JavaScript截图 jQuery插件imgAreaSelect用法详解 #### 一、引言 在Web开发中,用户自定义头像的功能越来越受到重视。为了提供更好的用户体验,很多网站尤其是社交网络平台,都允许用户通过简单的操作来自定义...
《jQuery插件imgAreaSelect基础详解》 imgAreaSelect是一个基于jQuery的插件,它的主要功能是让用户通过鼠标拖曳来选择图片中的...通过深入理解和灵活运用其选项及API,开发者可以创建出满足各种需求的图片处理功能。
`jQuery_imgareaselect` 是一个用于图片裁剪的JavaScript插件,它允许用户通过鼠标在图片上选择一个矩形区域,然后可以...在实际应用中,可以根据项目需求调整选项和集成到后端裁剪服务,以实现完整的图片处理流程。
【基于jQuery网页截图插件(imgareaselect)】是一个用于网页截取图像选定区域的JavaScript库,它与jQuery框架紧密集成,为用户提供了一个简单易用的交互式选择工具。这个插件允许用户在网页上自由划定一个矩形区域...
《jQuery图片裁剪插件imgareaselect详解与实践》 在现代网页设计中,用户交互体验愈发重要,其中图片裁剪功能常用于头像编辑、图片上传预览等场景。jQuery图片裁剪插件imgareaselect便应运而生,它提供了简单易用的...
`imgAreaSelect`可以与各种前端框架(如Bootstrap、Vue、React等)或图片处理库(如Cropper.js)结合使用,以实现更复杂的功能。 7. **常见问题与解决方案** - **兼容性问题**:确保目标浏览器支持jQuery,以及`...
在IT行业中,前端开发经常需要处理用户上传图片并进行预处理,例如裁剪,以满足特定的展示需求。本教程将深入讲解如何使用jQuery和PHP技术实现这一功能,结合`.imgareaselect`插件,我们可以创建一个强大的图片上传...
在IT行业中,前端开发经常需要处理用户上传图片的需求,而"jQuery+ajaxupload+imgareaselect+asp.net上传预览截取图像"这个主题,就是一种高效且用户体验优秀的解决方案。接下来,我们将深入探讨这些技术及其整合...
在IT行业中,图片处理是一项非常常见的任务,尤其是在网站开发、图像编辑和用户交互设计中。本文将详细讨论“imgareaselect裁剪图片”这一技术,以及如何利用它来实现图片上传与裁剪功能。 “imgareaselect”是一个...
ASP.NET是一种基于.NET Framework的服务器...这不仅提高了用户的交互性,也为图片处理提供了一种灵活的方法。在实际项目中,你可能还需要考虑错误处理、图片大小限制、安全问题(如防止XSS攻击)以及其他性能优化策略。
"imguploadncrop"项目正是针对这一需求,提供了一套完整的解决方案,它基于jQuery.imgAreaSelect-0.9.10插件,实现了网页上的截图上传功能,并结合PHP后端代码处理上传的图片,确保了用户体验和数据安全。...
jQuery插件ImgAreaSelect是一个能够为图片添加可拖拽的裁剪框的插件,适合于在网页上实现图片上传预览和裁剪功能。为了实现头像上传、预览以及裁剪功能,我们需要遵循以下步骤: 首先,要明确目标功能: 1. 图片...