上期在如何实现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插件，轻松实现各种应用功能，如用户自定义头像，复制图片等。