上期在如何实现javascript截图 jQuery插件imgAreaSelect使用详解一
文中通过jQuery插件imgAreaSelect动态截取图像,可以获取当前小图像在源图片中的位置等信息,jQuery的
imgAreaSelect插件内置方法preview()可得到当前图像的坐标(起点XY和终点XY)以及宽度和高度,再结合PHP
GD库内置函数imagecopyresampled()的复制图像功能,在图片中截取图像,实现具体应用如:用户自定义头像功能等。
结合上期实例(略)
一,javascript代码部分
function preview(img, selection) {
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$(’#thumbnail + 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’
});
$(’#x1‘).val(selection.x1);
$(’#y1‘).val(selection.y1);
$(’#x2‘).val(selection.x2);
$(’#y2‘).val(selection.y2);
$(’#w‘).val(selection.width);
$(’#h‘).val(selection.height);
}
$(document).ready(function () {
$(’#save_thumb‘).click(function() {
var x1 = $(’#x1′).val();
var y1 = $(’#y1′).val();
var x2 = $(’#x2′).val();
var y2 = $(’#y2′).val();
var w = $(’#w’).val();
var h = $(’#h’).val();
if(x1==”" || y1==”" || x2==”" || y2==”" || w==”" ||
h==”"){
alert(”请选择缩略图”);
return false;
}else{
return true;
}
});
});
二,增加form表单Html
method=”post”>
name=”x1” value=”" id=”x1″ />
name=”y1” value=”" id=”y1″ />
name=”x2” value=”" id=”x2″ />
name=”y2” value=”" id=”y2″ />
name=”w” value=”" id=”w” />
name=”h” value=”" id=”h” />
value=”保存缩略图” id=”save_thumb”
/>
当
点击保存缩略图按钮后,form表单中隐藏框如x1,y1等值由jQuery的imgAreaSelect调取preview()方法获取当前截取图像的
位置如:selection.x1,selection.y1,同时判断值是否存在,如果其中任何一个值不存在则不提交,并友好提示。接下来就把当前图像
的坐标位置交给PHP GD库内置imagecopyresampled()函数处理。如图:
三,imagecopyresampled函数相关资料
说明:imagecopyresampled 重采样拷贝部分图像并调整大小
原型:bool imagecopyresampled (
resource dst_image, resource src_image, int dst_x, int dst_y, int
src_x, int src_y, int dst_w, int dst_h, int src_w, int src_h
)dst_image 和 src_image 分别是目标图像和源图像的标识符。
其它:imagecopyresampled(目
标图像,源图像,存宽度,存高度,坐标X,坐标Y,源宽度,源高度) 如果成功则返回 TRUE,失败则返回 FALSE。
imagecopyresampled()
将一幅图像中的一块正方形区域拷贝到另一个图像中,平滑地插入像素值,因此,尤其是,减小了图像的大小而仍然保持了极大的清晰度。如果源和目标的宽度和高
度不同,则会进行相应的图像收缩和拉伸。坐标指的是左上角。本函数可用来在同一幅图内部拷贝(如果 dst_image 和
src_image 相同的话)区域,但如果区域交迭的话则结果不可预知。
注意事项: 因为调色板图像限制(255+1 种颜色)有个问题。重采样或过滤图像通常需要多于
255
种颜色,计算新的被重采样的像素及其颜色时采用了一种近似值。对调色板图像尝试分配一个新颜色时,如果失败我们选择了计算结果最接近(理论上)的颜色。这
并不总是视觉上最接近的颜色。这可能会产生怪异的结果,例如空白(或者视觉上是空白)的图像。要跳过这个问题,请使用真彩色图像作为目标图像,例如用
imagecreatetruecolor() 创建的。
版本要求: 本函数需要 GD 2.0.1 或更高版本(推荐 2.0.28
及更高版本)。
四,实现机制:
1,上传图片,注意:使用真彩色图像作为目标图像,用imagecreatetruecolor创建。
2,使用jQuery插件imgAreaSelect获取截图的坐标信息,如左上角X,左上角Y等。
3,提交需要截取图像位置信息,使用上面imagecopyresampled函数复制图像,实现截取图像。
4,保存截取图像。
了解PHP的imagecopyresampled函数的使用,通过PHP实现截图功能就非常简单,结合jQuery的imgAreaSelect插件,轻松实现各种应用功能,如用户自定义头像,复制图片等。