PHP与jQuery结合实现自定义截图功能
一、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：
<form name="thumbnail" action="" method="post">
<input type="hidden" name="x1" value="" id="x1">
<input type="hidden" name="y1" value="" id="y1">
<input type="hidden" name="x2" value="" id="x2">
<input type="hidden" name="y2" value="" id="y2">
<input type="hidden" name="w" value="" id="w">
<input type="hidden" name="h" value="" id="h">
<input type="submit" name="upload_thumbnail" value="保存缩略图" id="save_thumb">
</form>
当点击“保存缩略图”按钮后，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插件，轻松实现各种应用功能，如用户自定义头像，复制图片等。