Я проверял эту библиотеку Laravel, чтобы сжать загруженные пользователем изображения.http://image.intervention.io/
Мне было интересно, если это хорошая идея для загруженных пользователем изображений (для профилей)? Что делать, если пользователь загружает изображение размером 1400×600, и оно будет изменено до 200×200? Это будет растянутое изображение?
Да, это будет растягиваться. Вы хотите попробовать fit()
метод:
Комбинируйте обрезку и изменение размера для разумного форматирования изображения.
Метод найдет наиболее подходящее соотношение сторон для данной ширины и
высота на текущем изображении автоматически, вырезать его и изменить его размер
данное измерение.
// crop the best fitting 1:1 ratio (200x200) and resize to 200x200 pixel
$img->fit(200);
Вмешательство отлично подходит для обработки только этого. Вот небольшой фрагмент кода, который поможет вам в правильном направлении:
$resize_to = $this->sizes(); //some arbitrary array
//generate our custom image sizes
foreach ($resize_to as $idx => $width) {
if ($img = Image::make($file->getRealPath())) {
$img->resize(width, null, function ($constraint) {
$constraint->aspectRatio();
$constraint->upsize();
});
$img->encode($encoding_options);
$img->save($path);
}
}
Выше мы зациклились на некотором массиве ширины, к которому мы хотим изменить размеры изображений. Обратите внимание на $constraints
что мы объявили ниже. aspectRatio()
гарантирует, что изображение никогда не потеряет свое соотношение сторон. ->upsize()
предотвращает увеличение размера изображения и потерю разрешения.
То, что вы просите — изменить размер изображения 1400×600 до 200x200
неразумно.
Вместо этого вы должны просто изменить размер на одно измерение и убедиться, что ваш HTML может учитывать все остальное. Например, в приведенном выше мы только наблюдаем widths
, Итак, мы примем в вашем $this->sizes()
массив, один из них 200. Но изображение было другим соотношением, поэтому оно не создавало 200×200, оно создавало 200×150. Обрабатывать это в HTML с помощью flexbox очень легко:
<div class="flex-box-centered">
<img class="flex-img" src="..."/>
</div>
И CSS:
.flex-box-centered {
display:flex;
width:200px;
height:200px;
justify-content:center;
align-items:center;
background:#fff;
}
.flex-img {
display:flex;
width:100%;
height:auto;
}
Когда вы загрузили изображение в $image
как Intervention\Image\Image
Вы можете легко сделать это так:
// $height and $width are your max values
if ($image->width < $image->height) {
$image->resize(null, $height, true, false);
} else {
$image->resize($width, null, true, false);
}
который изменит ваш образ в правильном направлении.
ну да это лучший вариант. Поскольку Image Intervention использует Imagick в фоновом режиме. Я бы порекомендовал вам использовать Image Intervention. Вы также можете сжать изображения при их сохранении.
// open and resize an image file
$img = Image::make('public/foo.jpg')->resize(300, 200);
// save file as jpg with medium quality
$img->save('public/bar.jpg', 60);
Качество изображения колеблется от 0 (низкое качество, маленький файл) до 100 (лучшее качество, большой файл).
композитор требует вмешательства / изображения
// config / app.php
return [
......
$provides => [
......
......,
'Intervention\Image\ImageServiceProvider'
],
$aliases => [
.....
.....,
'Image' => 'Intervention\Image\Facades\Image'
]
]
/ * Код контроллера
/*With Image Compression*/
$image = $request->file('profile_image');
$fileExtension = strtolower($image->getClientOriginalExtension());
$file_name = sha1(uniqid().$image.uniqid()).'.'.$fileExtension;
$destinationPath = 'uploads/profile_image/';
$img = Image::make($image->getRealPath());
$img->resize(140, 140, function ($constraint) {
$constraint->aspectRatio();
})->save($destinationPath.$file_name);
/*End With Image Compression*/