PHP和jQuery实现截图自定义头像
2010-02-07 14:20
232 查看
在一些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 代码：
<script type="text/javascript">
function preview(img, selection) {
var scaleX = 100 / selection.width;//100指的是新图的宽
var scaleY = 100 / selection.height;//100指的是新图的高
$('#thumbnail img').css({
width: Math.round(scaleX * 800) + 'px', //800指的是原图的宽
height: Math.round(scaleY * 600) + 'px', //600指的是原图的高
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 () {
$('img#photo').imgAreaSelect({ x1: 0, y1: 0, x2: 50, y2: 50, fadeSpeed:10,aspectRatio: '1:1', handles:"corners",onSelectChange: preview});
$('#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("image is null");
return false;
}else{
return true;
}
});
});
</script>
其中preview函数是当选择截图的时候，有一个预览的效果
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 及更高版本）。
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 代码：
<script type="text/javascript">
function preview(img, selection) {
var scaleX = 100 / selection.width;//100指的是新图的宽
var scaleY = 100 / selection.height;//100指的是新图的高
$('#thumbnail img').css({
width: Math.round(scaleX * 800) + 'px', //800指的是原图的宽
height: Math.round(scaleY * 600) + 'px', //600指的是原图的高
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 () {
$('img#photo').imgAreaSelect({ x1: 0, y1: 0, x2: 50, y2: 50, fadeSpeed:10,aspectRatio: '1:1', handles:"corners",onSelectChange: preview});
$('#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("image is null");
return false;
}else{
return true;
}
});
});
</script>
其中preview函数是当选择截图的时候，有一个预览的效果
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 及更高版本）。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 头像上传插件（php+jquery_jcrop_js+jquery_form_js实现）
- 利用jquery Jcrop和 php实现截图功能
- 利用jquery Jcrop和 php实现截图功能
- atitit. 集合groupby 的实现(2)---自定义linq查询--java .net php
- jquery实现类似淘宝星星评分功能有截图
- jQuery+PHP+Mysql实现输入自动完成提示的功能
- php+javascript实现头像的切割
- 基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
- PHP采用自定义函数实现遍历目录下所有文件的方法
- jquery $.post() 向php传值 实现简单的二级联动
- jquery 多维数组实现PHP的count、in_array(不区分大小写)，utf8字符串(包含中文，中文字符2个字节)字节统计
- Android学习笔记--自定义圆形头像简单实现
- Jquery实现自定义tooltip示例代码
- jquery和php实现同一个页面传值
- jQuery+PHP+ajax实现微博加载更多内容列表功能
- 用jquery实现自定义风格的滑动条
- 几行实现圆形头像，以及一些常见需求形状自定义ImageView组件
- zepto+html5+php实现h5上传头像（移动端）上
- jquery-ajax-php(内容点赞并进行cookie限制实现)