怎样用jquery和php来裁剪图片

你可能遇到一个这样一个场景:你的客户端上传图片到新开发的cms系统,然后要求你修正扭曲的图片,或者图片看起来很不对劲。 让我来解释一下我们今天的任务。当你的客户端上传一个图片时候,在被上传图片和小预览窗口的地方,往往需要一个图片编辑区域。只要拖拽大图片到选择裁剪区域并点击确认即可。

原作者:  翻译:柳华芳  谢绝转载

你可能遇到一个这样一个场景:你的客户端上传图片到新开发的cms系统,然后要求你修正扭曲的图片,或者图片看起来很不对劲。

让我来解释一下我们今天的任务。当你的客户端上传一个图片时候,在被上传图片和小预览窗口的地方,往往需要一个图片编辑区域。只要拖拽大图片到选择裁剪区域并点击确认即可。

用php gd 函数裁剪图片后,保存新图片到磁盘的某位置。

裁剪去图片外部部分来优化框架,突出主题或改变宽度比。

我将聚焦图片编辑部分,假设客户端已经上传了图片。这里我们做一些标记:

<p>Drag on the larger image to select crop area.</p>
<p>
    <img id="photo" src="photo.jpg" alt="" title="" style="margin: 0 0 0 10px;" />
 </p>

这里,我们有一个图片标签和一些样式。我们将用jquery插件来辅助客户端的工作,而不是白手写代码。mgAreaSelect jQuery plugin page 下载插件。

Extract css and scripts folder in your working folder and put this in your HTML’s head section:

解压css和脚本文件夹到你的工作文件夹,并且在你的html头部插入以下片段:

1
2
3
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" /> 
<script type="text/javascript" src="scripts/jquery.imgareaselect.pack.js"></script>

现在,你可以爽一下了。像我开始说的,我们将展示一个预览给用户们,所以,让我们来用jquery来创建它:

$(document).ready(function () {
    $('<div><img src="photo.jpg" style="position: relative;" /><div>') .css({
        float: 'left',
        position: 'relative',
        overflow: 'hidden',
        width: '100px',
        height: '100px'
    }) .insertAfter($('#photo')); 
});

这个代码是来添加一个100×100的图片到文档的photo id后。让我们创建一些裁剪函数,来修改前面的代码如下:

$(document).ready(function () {
    $('<div><img src="photo.jpg" style="position: relative;" /><div>') .css({
        float: 'left',
        position: 'relative',
        overflow: 'hidden',
        width: '100px',
        height: '100px'
    }) .insertAfter($('#photo'));
    
    $('#photo').imgAreaSelect({
        aspectRatio: '1:1',
        handles: true,
        onSelectChange: preview
    });
});

我们添加一个插件调用,设置一些参数和函数回调来在小的div中预览我们的图片。函数如下:

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    $('#photo + div > img').css({
        width: Math.round(scaleX * 600) + 'px',
        height: Math.round(scaleY * 400) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}

让我解释一下。我们插件发送两个参数到外部调用函数、图片和选择区。选择区是包含宽、高、边框的一个对象。

接着,我们设置变量并通过改变预览div的css属性,我们将展示预览图片给用户。试试看,是不是很牛逼。

但是,那啥,这是没用的。看起来不错,但是什么也干不了。要提供裁剪参数给php文件,我们必须用表单,并且包含要存储和传送给php文件的参数。

让我们在图片下面添加一个表单,我们标记如下:

<p>
    <img id="photo" src="photo.jpg" alt="" title="" style="margin: 0 0 0 10px;" />
</p>
<form action="crop.php" method="post">
    <input type="hidden" name="x1" value="" />
    <input type="hidden" name="y1" value="" />
    <input type="hidden" name="x2" value="" />
    <input type="hidden" name="y2" value="" />
    <input type="hidden" name="w" value="" />
    <input type="hidden" name="h" value="" />
    <input type="submit" value="Crop" />
</form>

现在让我们调整js代码,让它写上表单项的值。完整代码如下:

function preview(img, selection) {
    var scaleX = 100 / (selection.width || 1);
    var scaleY = 100 / (selection.height || 1);
    $('#photo + div > img').css({
        width: Math.round(scaleX * 600) + 'px',
        height: Math.round(scaleY * 400) + 'px',
        marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
        marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
    });
}
$(document).ready(function () {
    $('<div><img src="photo.jpg" style="position: relative;" /><div>') .css({
        float: 'left',
        position: 'relative',
        overflow: 'hidden',
        width: '100px',
        height: '100px'
    }) .insertAfter($('#photo'));
    
    $('#photo').imgAreaSelect({
        aspectRatio: '1:1',
        handles: true,
        onSelectChange: preview,
        onSelectEnd: function ( image, selection ) {            $('input[name=x1]').val(selection.x1);
            $('input[name=y1]').val(selection.y1);
            $('input[name=x2]').val(selection.x2);
            $('input[name=y2]').val(selection.y2);
            $('input[name=w]').val(selection.width);
            $('input[name=h]').val(selection.height); 
        }
    });
});

现在,你鼠标全选,就会回调函数写入4个坐标值进入我们表单项。当我们点击裁剪按钮时候,参数被传送到php文件crop.php,此文件负责裁剪图片和保存到磁盘。下面是crop.php代码:

// Original image
$filename = 'photo.jpg';
//die(print_r($_POST));
$new_filename = 'photo1.jpg';
// Get dimensions of the original image
list($current_width, $current_height) = getimagesize($filename);
// The x and y coordinates on the original image where we
// will begin cropping the image, taken from the form
$x1    = $_POST['x1'];
$y1    = $_POST['y1'];
$x2    = $_POST['x2'];
$y2    = $_POST['y2'];
$w    = $_POST['w'];
$h    = $_POST['h'];    
//die(print_r($_POST));
// This will be the final size of the image
$crop_width = 100;
$crop_height = 100;
// Create our small image
$new = imagecreatetruecolor($crop_width, $crop_height);
// Create original image
$current_image = imagecreatefromjpeg($filename);
// resamling (actual cropping)
imagecopyresampled($new, $current_image, 0, 0, $x1, $y1, $crop_width, $crop_height, $w, $h);
// creating our new image
imagejpeg($new, $new_filename, 95);

imagecopyresampled()【php原生函数】将一幅图像中的一块正方形区域拷贝到另一个图像中,平滑地插入像素值,因此,尤其是,减小了图像的大小而仍然保持了极大的清晰度。

现在,你可以自己在服务器或本地php环境进行练习了。

当然,也可以通过专业书籍来深入学习:《深入PHP与jQuery开发

柳华芳
柳华芳

奔向光明之地

文章: 1201
订阅评论
提醒
guest

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

0 评论
内联反馈
查看所有评论
0
希望看到您的想法,请您发表评论x