在本文中, 我们将学习如何使用PHP和jQuery裁剪图像Jcrop插件。
注意：请下载jQuery Jcrop 插件, 并将所需文件包含在HTML代码的开头部分。
<link href =" jquery.Jcrop.min.css" rel =" stylesheet" type =" text / css" /> <script src =" jquery.min.js"> </ script> <script src =" jquery。 Jcrop.min.js"> </ script>
例子：以下HTML代码演示了Jcrop插件, 方法是获取图像文件并提供"裁剪图像"按钮以裁剪图像并在另一个HTML" div"中显示输出的裁剪图像。
<!DOCTYPE html>
< html >
< head >
<!-- All the required libraries to
crop the image-->
< link rel = "stylesheet"
href = "jquery.Jcrop.min.css"
type = "text/css" />
< script src = "jquery.min.js" ></ script >
< script src = "jquery.Jcrop.min.js" ></ script >
< style >
body {
width: 500px;
height: 380px;
font-family: Arial, Sans-serif;
}
.btnSubmitClass {
background-color: #696969;
padding: 5px 30px;
border: #696969 1px solid;
border-radius: 4px;
color: #FFFFFF;
margin-top: 10px;
}
input#cropBtnID {
padding: 5px 25px 5px 25px;
background: #D3D3D3;
border: #98b398 1px solid;
color: #FFF;
visibility: hidden;
}
#outputImage {
margin-top: 40px;
}
</ style >
</ head >
< body >
< h2 >
How to crop image using
jQuery and PHP
</ h2 >
< div >
< img src = "gfg2.jpg" id = "cropImageID"
class = "img" />< br />
</ div >
< div id = "btn" >
< input type = 'button' id = "cropBtnID"
value = 'Crop Image' >
</ div >
< div >
< img src = "#" id = "outputImage"
style = "display:none;" >
</ div >
< script type = "text/javascript" >
$(document).ready(function () {
var size;
$('#cropImageID').Jcrop({
/* Some settings for
basic configuration*/
allowSelect: true, allowMove: true, allowResize: true, fixedSupport: true, aspectRatio: 1, onSelect: function (c) {
size = { x: c.x, y: c.y, w: c.w, h: c.h };
$("#cropBtnID").css(
"visibility", "visible");
}//end onSelect
});//end Jcrop method
$("#cropBtnID").click(function () {
var img = $("#cropImageID").attr('src');
$("#outputImage").show();
$("#outputImage").attr('src', 'image-features.php?x = ' +
size.x + ' & y=' + size.y +
' & w=' + size.w + '&h=' +
size.h + '&img=' + img);
});
});//end document ready fn
</ script >
</ body >
</ html >PHP代码：以下PHP代码实现了上述图像代码和颜色创建中使用的" image-features.php"文件。用于创建新映像的PHP函数是imagecreatefromjpeg()方法。使用PHP创建新的真彩色图像imagecreatetruecolor()方法。使用的其他PHP函数是imagecopyresampled()和imagejpeg().
<?php
// Create a new image from a file
$newImage = imagecreatefromjpeg( $_GET [ 'img' ]);
// Create a new true color image
$newTruecolorImage = imagecreatetruecolor(
$_GET [ 'w' ], $_GET [ 'h' ]);
// Copy a portion from one image to another
imagecopyresampled( $newTruecolorImage , $newImage , 0, 0, $_GET [ 'x' ], $_GET [ 'y' ], $_GET [ 'w' ], $_GET [ 'h' ], $_GET [ 'w' ], $_GET [ 'h' ]);
header( 'Content-type: image/jpeg' );
// Display image to browser as output
imagejpeg( $newTruecolorImage );
exit ;
?>输出如下：
