必优博客

本博客所有文章均属原创作品，如有转载，请注明作者：biuuu，来源：http://www.biuuu.com/?p=276

上期在如何实现javascript截图 jQuery插件imgAreaSelect使用详解一文中通过jQuery插件imgAreaSelect动态截取图像，可以获取当前小图像在源图片中的位置等信息，jQuery的imgAreaSelect插件内置方法preview()可得到当前图像的坐标(起点XY和终点XY)以及宽度和高度，再结合PHP GD库内置函数imagecopyresampled()的复制图像功能，在图片中截取图像，实现具体应用如：用户自定义头像功能等。

结合上期实例(略)

一，javascript代码部分

1. function preview(img, selection) {
2. var scaleX = 100 / selection.width;
3. var scaleY = 100 / selection.height;
4. $('#thumbnail + div > img').css({
5. width: Math.round(scaleX * 400) + 'px',
6. height: Math.round(scaleY * 300) + 'px',
7. marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
8. marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
9. });
10. $('#x1').val(selection.x1);
11. $('#y1').val(selection.y1);
12. $('#x2').val(selection.x2);
13. $('#y2').val(selection.y2);
14. $('#w').val(selection.width);
15. $('#h').val(selection.height);
16. }
17. $(document).ready(function () {
18. $('#save_thumb').click(function() {
19. var x1 = $('#x1').val();
20. var y1 = $('#y1').val();
21. var x2 = $('#x2').val();
22. var y2 = $('#y2').val();
23. var w = $('#w').val();
24. var h = $('#h').val();
25. if(x1=="" || y1=="" || x2=="" || y2=="" || w=="" || h==""){
26. alert("请选择缩略图");
27. return false;
28. }else{
29. return true;
30. }
31. });
32. });

二，增加form表单Html

1. <form name="thumbnail" action="" method="post">
2. <input type="hidden" name="x1" value="" id="x1" />
3. <input type="hidden" name="y1" value="" id="y1" />
4. <input type="hidden" name="x2" value="" id="x2" />
5. <input type="hidden" name="y2" value="" id="y2" />
6. <input type="hidden" name="w" value="" id="w" />
7. <input type="hidden" name="h" value="" id="h" />
8. <input type="submit" name="upload_thumbnail" value="保存缩略图" id="save_thumb" />
9. </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插件，轻松实现各种应用功能，如用户自定义头像，复制图片等。

往期相关：如何实现javascript截图 jQuery插件imgAreaSelect使用详解