原作者:Zvonko Biškup 翻译:柳华芳 谢绝转载
你可能遇到一个这样一个场景:你的客户端上传图片到新开发的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代码:
|
imagecopyresampled()【php原生函数】将一幅图像中的一块正方形区域拷贝到另一个图像中,平滑地插入像素值,因此,尤其是,减小了图像的大小而仍然保持了极大的清晰度。
现在,你可以自己在服务器或本地php环境进行练习了。
当然,也可以通过专业书籍来深入学习:《深入PHP与jQuery开发》