En este artículo, aprenderemos cómo recortar una imagen usando PHP y el complemento jQuery Jcrop .
Nota: descargue el complemento jQuery Jcrop e incluya los archivos necesarios en la sección principal de su código 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>
Ejemplo: El siguiente código HTML demuestra el complemento Jcrop tomando un archivo de imagen y dando un botón «Recortar imagen» para recortar la imagen y mostrar la imagen recortada de salida en otro «div» HTML.
<!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>
Código PHP: El siguiente código PHP implementa el archivo “image-features.php” que se usa en el código HTML anterior para la creación de imágenes y colores. La función PHP utilizada para crear una nueva imagen es el método imagecreatefromjpeg() . Se crea una nueva imagen en color verdadero utilizando el método PHP imagecreatetruecolor() . Otras funciones de PHP utilizadas son imagecopyresampled() e 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;
?>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA