上期在如何实现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使用详解

原创文章如转载，请注明：转载自 必优博客 http://www.biuuu.com/

本文链接地址：http://www.biuuu.com/p276.html