Как обрезать изображение в центр при загрузке того же
В проект здесь, я хочу, чтобы отобразить изображения в div квадратный размер динамика, где его максимальный размер 240 х 240.
Предполагая, что пользователю загружать изображения с размер прямоугольной (например: 500 x 280), это же div находится "изуродованные", поскольку высота ее авто, а высота находится в пропорциональной ширины. И моя цель, и пусть все div с квадратного формата.
таким образом, мне нужно, чтобы все изображения, которые будут exibas имеют размер квадрата, то есть, 200x200, 300x300, или любой другой размер, при условии, что это квадрат.
На мой взгляд простой способ сделать это, вырезав в изображение во время загрузки. И желательно обрезки, должен быть в центре картины. EX:
Как вы можете видеть, изображение было обрезано до центра, и теперь она имеет Высоту и Ширину обозначает.
3 answers
Скачать JCrop и сделайте две страницы так:
домашняя Страница: (crop.php)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Arquivo</title>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.12/js/jquery.Jcrop.min.js"></script>
<script language="Javascript">
$(function(){
$('#ImagemCrop').Jcrop({
aspectRatio: 1,
onSelect: UpdateCrop,
setSelect: [0, 0, 200, 200],
});
});
function UpdateCrop(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
$("#altura").html("Altura:" + c.h);
$("#largura").html("Largura:" + c.w);
};
</script>
</head>
<body>
<div id="altura">Altura:</div>
<div id="largura">Largura:</div>
<form action="recorte.php" method="post">
<input type="hidden" id="x" name="x" />
<input type="hidden" id="y" name="y" />
<input type="hidden" id="w" name="w" />
<input type="hidden" id="h" name="h" />
<input type="hidden" id="imagem" name="imagem" value="img/1.jpg" />
<input type="submit" value="Recortar Imagem" />
</form>
<img src="img/1.jpg" id="ImagemCrop" />
</body>
</html>
Страница, которая получает данные для обрезки: - обрезка.php)
<?php
if (isset($_POST['imagem']) &&
isset($_POST['x']) &&
isset($_POST['y']) &&
isset($_POST['w']) &&
isset($_POST['h']))
{
$targ_w = $_POST['w'];
$targ_h = $_POST['h'];
$jpeg_quality = 90;
$src = $_POST['imagem'];
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-type: image/jpeg');
imagejpeg($dst_r,null,$jpeg_quality);
} else {
echo 'error';
}
, ребята, вопрос был о том, как вырезать изображение по центру по загрузки одного и того же. Я исследовал в интернете, и я в конечном итоге изменение идею и с помощью JCROP, но вопрос сам по себе просто не был дан ответ, я искал то по этому вопросу в интернете, и я нахожу сценарий, который solucionava мой вопрос. Сценарий не мой, но я сделал несколько незначительных изменений, чтобы лучше адаптироваться к моя первоначальная цель.
И Вот сценарий:
<form action="" method="post" enctype="multipart/form-data">
<input name="img" type="file" />
<input type="submit" name="cadastrar" />
</form>
<?php
if(isset($_POST['cadastrar'])){
$img = $_FILES['img'];
$name =$img['name'];
$tmp =$img['tmp_name'];
$ext =end(explode('.',$name));
$pasta ='NOMEDAPASTA/'; //Pasta onde a imagem será salva
$permiti =array('jpg', 'jpeg', 'png');
$name = uniqid().'.'.$ext; $uid = uniqid();
$upload = move_uploaded_file($tmp, $pasta.'/'.$name);}; //Faz o upload da imagem para o servidor
if($upload){
function resize_crop_image($max_width, $max_height, $source_file, $dst_dir, $quality = 60){
$imgsize = getimagesize($source_file);
$width = $imgsize[0];
$height = $imgsize[1];
$mime = $imgsize['mime'];
//resize and crop image by center
switch($mime){
case 'image/gif':
$image_create = "imagecreatefromgif";
$image = "imagegif";
break;
//resize and crop image by center
case 'image/png':
$image_create = "imagecreatefrompng";
$image = "imagepng";
$quality = 6;
break;
//resize and crop image by center
case 'image/jpeg':
$image_create = "imagecreatefromjpeg";
$image = "imagejpeg";
$quality = 60;
break;
default:
return false;
break;
}
$dst_img = imagecreatetruecolor($max_width, $max_height);
$src_img = $image_create($source_file);
$width_new = $height * $max_width / $max_height;
$height_new = $width * $max_height / $max_width;
if($width_new > $width){
$h_point = (($height - $height_new) / 2);
imagecopyresampled($dst_img, $src_img, 0, 0, 0, $h_point, $max_width, $max_height, $width, $height_new);
}else{
$w_point = (($width - $width_new) / 2);
imagecopyresampled($dst_img, $src_img, 0, 0, $w_point, 0, $max_width, $max_height, $width_new, $height);
}
$image($dst_img, $dst_dir, $quality);
if($dst_img)imagedestroy($dst_img);
if($src_img)imagedestroy($src_img);
}
//Tamanho da Imagem final
resize_crop_image(300, 300, $pasta.'/'.$name, $pasta.'/'.$name);}
?>
Сделать это можно с помощью обрезки в осадок от сервера, я использую представьте, имеет ориентированный подход, очень интересно для обработки изображений.
Установки
Добавьте в ваш файл composer.json следующую зависимость:
"require": {
"imagine/imagine": "dev-master"
},
Пример использования
require_once './vendor/autoload.php';
$imagine = new Imagine\Gd\Imagine();
$size = new Imagine\Image\Box(200, 200);
$mode = Imagine\Image\ImageInterface::THUMBNAIL_OUTBOUND;
$imagine->open($_FILES['file']['tmp_name'])
->thumbnail($size, $mode)
->save(__DIR__ . '/upload/' . $_FILES['file']['name'])
;