PHP和jQuery实现截图自定义头像

最新推荐文章于 2021-04-12 00:20:52 发布

南三方

最新推荐文章于 2021-04-12 00:20:52 发布

阅读量1.0k

点赞数

分类专栏： PHP 文章标签： jquery php image input dst stylesheet

PHP 专栏收录该内容

120 篇文章 1 订阅

订阅专栏

在一些SNS网站上常会有一些自定义头像的功能，这里介绍一个用PHP和jQuery实现截图自定义头像的方法，需要的环境和前提如下：

1，PHP 需要 GD 2.0.1 或更高版本
2，jQuery库
3，jQuery图片处理插件imgareaselect

其中imgareaselect插件可以参考其官方网站：http://odyniec.net/projects/imgareaselect/ ，也可浏览本博客的相关内容：jQuery的截图插件imgAreaSelect，这里介绍了设置 imgAreaSelect 插件里所有参数及其描述。

HTML头需要引入的文件:

<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>
<head>
其中CSS文件是jQuery的截图插件imgAreaSelect压缩包里自带的CSS样式，jquery.min.js 是jQuery库文件，jquery.imgareaselect.pack.js是imgareaselect插件的文件。

Javascript 代码：

HTML代码：

<div style="float:left;" class="frame">
<img src="Water lilies.jpg" id="photo"/>
</div>
<div style="float:left; width: 100px; height: 100px;" id="thumbnail">
   <div style="overflow: hidden; width: 100px; height: 100px;" id="preview">
    <img src="Water lilies.jpg"/>
   </div>
</div>
<div style="margin-top:10px;">
<form name="thumbnail" action="imgareaselect.php" 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="save thumb" id="save_thumb" />
</form>
</div>
PHP代码：

$ifn = "Water lilies.jpg";
$ofn = "test_thumb.jpg";
$ext = strtoupper(end(explode('.',$ifn)));
if(is_file($ifn) && ($ext == "JPG" || $ext == "JPEG")){
$source = imagecreatefromjpeg($ifn);
}elseif(is_file($ifn) && $ext == "PNG"){
$source = imagecreatefromPNG($ifn);
}elseif(is_file($ifn) && $ext == "GIF"){
$source = imagecreatefromGIF($ifn);
}
$sourceWidth = imagesx($source);
$sourceHeight = imagesy($source);
$thumbWidth = $_POST['w'];
$thumbHeight = $_POST['h'];
$thumb = imagecreatetruecolor($thumbWidth, $thumbHeight);
$x1 = $_POST['x1'];
$y1 = $_POST['y1'];
$x2 = $_POST['x2'];
$y2 = $_POST['y2'];
imagecopyresampled($thumb,
$source,
0,
0,
$x1,
$y1,
$thumbWidth,
$thumbHeight,
$thumbWidth,
$thumbHeight
);
imagejpeg($thumb, $ofn);
这里重点介绍一下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 及更高版本）。