Загрузка изображений

[kuzmich]

всем привет.

Есть рабочий код который позволяет загрузить несколько изображений за раз к товару. Работает все изумительно — сжимает изображение в двое.

<div id="add-image" class="add-image">
<div class="add-image-wrapper">
<div class="add-image-css">
<div class="add-image-header">
<h3 class="add-image-title">Изображения</h3>
<a href="#close" title="Закрыть" class="iw-close">×</a>
</div>
<div class="add-image-text">    
<?php
 if (!isset($_POST['image_id'])) {
 if (!isset($_POST['article'])) {
 if (!isset($_POST['image'])) {}
 else {
 echo "
 <form name='form1' method='POST' action='#add-image' enctype='multipart/form-data'>
 <input type='hidden' name='article' value='".$_POST['image']."'>
 <input accept='image/jpeg' type='file' name='file[]' multiple style='width:99%'>
 <input class='input_submit' type='submit' name='submit' value='Добавить фотографию(ии)'> 
 </form>
<table align='center' border='1' cellpadding='0' cellspacing='0' width='100%'>
 <tr>
  <td bgcolor='#CCCCCC' width='80%'><div align='center'><strong>Наименование</strong></div></td>
  <td bgcolor='#CCCCCC'><div align='center'><strong>Удалить</strong></div></td>
 </tr>
 ";
$image_db = mysqli_query($db,"SELECT * FROM `images-goods` WHERE `article`='".$_POST['image']."'");
if (!$image_db)
{
echo "<p>Запрос из выборки базы данных не прошел. Напишите об этом администратору. <em><strong>Код ошибки:</strong></em></p>";
exit(mysqli_error());
}
if (mysqli_num_rows($image_db) > 0){
$image_db_row = mysqli_fetch_array($image_db);
	do
	{
	echo "
	<tr>
	 <td><div align='center'><img src='".$image_db_row['image']."' style='width:80%;'></div></td>
	 <td valign='top'>
	 <form name='form1' method='POST' action='#add-image'>
	  <input type='hidden' name='image_id' value='".$image_db_row['id']."'>
	  <input class='input_submit' type='submit' value='Удалить'>
	 </form>
	 </td>
	</tr>
	";
	}
	while ($image_db_row = mysqli_fetch_array($image_db));
}
else
{
echo "
 <tr>
  <td colspan='2'><div align='center'>К сожалению в даннм товаре отсутствуют изоброжения.</div></td>
 </tr>
";
}
 echo "</table>";
 
 }
 }
 else {

$path = '../../image/product/'; // путь до папки куда сохранять, ./ считать от расположениея скрипта

if (!is_dir($path)) {
    mkdir($path, 0777, true);
}
$count = $_POST['count'] - 1;
if (isset($_POST['submit']) && count($_FILES)) {
    for ($i = 0; $i <= 10; $i++) {
        $newnames = [];
        if (!empty($_FILES['file']['name'][$i])) {
            if ($info = getimagesize($_FILES['file']['tmp_name'][$i])) {
				
				list($width, $height) = getimagesize($_FILES['file']['tmp_name'][$i]);
				$new_width = $width/2;
				$new_height = $height/2;
				
				$image_p = imagecreatetruecolor($new_width, $new_height);
				$image = imagecreatefromstring(file_get_contents($_FILES['file']['tmp_name'][$i]));
				imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
				
                $name = explode('.', $_FILES['file']['name'][$i]);
                // обработка и сохранение
                $newname = $path . uniqid("", True) . '.jpg'; // это имя для базы, даже путь полный, только имя можно получить например через basename();
                $newnames[] = $newname; // basename($name);
                imagejpeg($image_p, $newname);
				
				$article = @$_POST["article"];
				
            } else {
                echo "
					<div align='center'><img src='../image/error.png'></div>
					<div align='center'>Вы не выбрали изображения.</div>
					<div align='center'><a href='module-add-image-goods.php' style='color:#000000; text-decoration:none;'><strong>Вернуться обратно</strong></a></div>
				";
				exit();
            }
        } else {
            continue;
        }
        $out[] = "('".$newname."', '".$article."')";
    }}

    if(!empty($out))
    {
		//echo implode(",", $out);
        $query = mysqli_query ($db,"INSERT INTO `images-goods` (`image`, `article`) VALUES ".implode(",", $out));
		echo "
			<div align='center'><img src='../image/checked.png'></div>
			<div align='center'>Вы успешно загрузили</div>
			<div align='center'>изображение к товару.</div>
			<div align='center'>
			 <form action='#add-image' method='post'>
			 <input type='hidden' name='image' value='".$_POST['article']."'>
			 <input class='input_submit' type='submit' value='OK'> 
			 </form>
			</div>
		";
    }
	else {
		echo "
			<div align='center'><img src='../image/error.png'></div>
			<div align='center'> Вы не смогли загрузить</div>
			<div align='center'>изображение, так как ничего не выбрали.</div>
			<div align='center'>
			 <form action='#add-image' method='post'>
			 <input type='hidden' name='image' value='".$_POST['article']."'>
			 <input class='input_submit' type='submit' value='OK'> 
			 </form>
			</div>
		";
	}

 }}
 else {
$delete_image_db = mysqli_query($db,"SELECT * FROM `images-goods` WHERE `id`='".$_POST['image_id']."'");
if (!$delete_image_db)
{
echo "<p>Запрос из выборки базы данных не прошел. Напишите об этом администратору. <em><strong>Код ошибки:</strong></em></p>";
exit(mysqli_error());
}
if (mysqli_num_rows($delete_image_db) > 0){
$delete_image_db_row = mysqli_fetch_array($delete_image_db);
unlink($delete_image_db_row['image']);
$drop = mysqli_query($db,"DELETE FROM `images-goods` WHERE `id`='".$delete_image_db_row['id']."'");
echo "
	<div align='center'><img src='../../image/checked.png'></div>
	<div align='center'>Вы успешно удалили фотографию</div>
	<div align='center'>из товара.</div>
	<div align='center'><a href='' style='text-decoration:none'><div style='background:#4788C7; border:0; color:#FFFFFF; padding:0.5vw; margin-top:2px; margin-bottom:3px; width:100%; font-weight:bold; font-size:1.3vw;'>OK</div></a></div>
	<div align='center'></div>
";
}
 }
?>
</div>
</div>
</div>	
</div>

Но загрузка изображений порой портит весь стиль сайта. Теперь я подумал — чтобы этого избежать, мне нужно чтобы они были у меня все стандартного размера 2048 на 2048 пикселей.

При загрузки изображение размер может быть 700 на 1024 пикселей или на оборот.
Подскажите пожалуйста как можно сделать так — чтобы размер был квадратным, а само изображение было по центру и где свободное место остается, чтобы было белого или серого цвета?

Заранее благодарю за помощь.

[Килобайт]

Чтобы сделать изображения квадратными и добавить белый или серый фон, можно использовать библиотеку PHP GD. Для этого необходимо добавить следующий код после строки

`$new_width = $width/2;`

:

```
$new_height = $height/2;

$image_p = imagecreatetruecolor(2048, 2048);
$bg = imagecolorallocate($image_p, 255, 255, 255); // белый фон
// $bg = imagecolorallocate($image_p, 128, 128, 128); // серый фон
imagefill($image_p, 0, 0, $bg);

$x = (2048 - $new_width) / 2;
$y = (2048 - $new_height) / 2;

imagecopyresampled($image_p, $image, $x, $y, 0, 0, $new_width, $new_height, $width, $height);

```

Этот код создаст новое изображение размером 2048 на 2048 пикселей с белым или серым фоном, в котором исходное изображение будет центрировано.

[ADSoft]

но это неправильный подход .... зачем делать изображения с ненужным фоном увеличивая их вес?
скорее всего потому что автор не знает/не хочет сверстать все так - что внешний вид не зависил от размера изображения средствами css

[Килобайт]

Согласен, использование GD для изменения размера изображений и добавления фона может привести к тому, что размер изображения увеличится, что может повлиять на скорость загрузки страницы. Вместо этого можно использовать CSS, чтобы изображения не портили дизайн сайта.

Например, можно использовать свойство

`object-fit`

для установки размеров изображения и его позиции внутри родительского контейнера. Для создания квадратного изображения с белым фоном можно использовать

`background-color`

и

`background-size`

.

```
.image-container {
  width: 200px;
  height: 200px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

```

Такой подход позволит сохранить пропорции изображения и избежать увеличения его размера.

Он также попросил помочь с тем, что у него есть.