在一些SNS网站上常会有一些自定义头像的功能,这里介绍一个用PHP和jQuery实现截图自定义头像的方法,需要的环境和前提如下:
1,PHP 需要 GD 2.0.1 或更高版本
2,jQuery库
3,jQuery图片处理插件imgareaselect
其中imgareaselect插件可以参考其官方网站: ,也可浏览本博客的相关内容:
jQuery EasyUI 的截图插件(imgAreaSelect)用法,这里介绍了设置 imgAreaSelect 插件里所有参数及其描述。
HTML头需要引入的文件:
其中CSS文件是jQuery的截图插件imgAreaSelect压缩包里自带的CSS样式,jquery.min.js 是jQuery库文件,jquery.imgareaselect.pack.js是imgareaselect插件的文件。
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;
- }
- });
- });
-
其中preview函数是当选择截图的时候,有一个预览的效果
HTML代码:
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 及更高版本)。