Адаптивный resize изображений [решено]

[kikasso 128]

Речь идет о проблеме с белыми полосками, возникающими при масштабировании превьюшек, если исходное изображение не пропорционально миниатюре.

Для решения этой задачи, предлагаю использовать библиотеку - http://phpthumb.gxdlabs.com

0. копируем из прикрепленного архива к топику, файлы в корень сайта

1. в файле config.php добавляем строчку, где Z:\my_syte.local\www/ - полный путь к корню сайта в файловой системе

define('DIR_BASE', 'Z:\my_syte.local\www/');

2. в \catalog\model\tool\image.php находим

$image = new Image(DIR_IMAGE . $old_image);
$image->resize($width, $height, $type);
$image->save(DIR_IMAGE . $new_image);

заменяем на

require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
$thumb->adaptiveResize($width, $height)->save(DIR_IMAGE . $new_image, 'JPG');

Готово, теперь все превьюшки на сайте будут одинаковые по ширине и высоте.

Следует отметить что данный способ масштабирования, если изображения слишком вытянуты по длине или ширине, может обрезать значимые части.

Не забываем чистить кэш изображений, чтобы обновились изображения!

По теме:

Удобная загрузка изображений OpenCart vs Dropbox

Использование PHPThumb, Plugins GD Reflection [en]

Сложное масштабирование изображений в PHP

adaptiv_resize.zip

[toporchillo 614]

Еще лучше хранить картинки в Облаках. Есть такой сервис cloudinary.com - облачный хостинг графики. Основная его фишка - обработка картинок на своей стороне: масштабирование, кадрирование, кадрирование вокруг лиц (определяет лица на фотографиях), скругление уголков, водяной знак,...

Таким образом вы избавляетесь от image/cache и сможете настроить кадрирование на уровне шаблонов.

Вот я наваял модуль http://www.opencart.com/index.php?route=extension/extension/info&extension_id=10702

Моодуль платный, так как сервис cloudinary.com меня не спонсировал.

[Guest brk]

Еще лучше хранить картинки в Облаках. Есть такой сервис cloudinary.com - облачный хостинг графики. Основная его фишка - обработка картинок на своей стороне: масштабирование, кадрирование, кадрирование вокруг лиц (определяет лица на фотографиях), скругление уголков, водяной знак,...

Таким образом вы избавляетесь от image/cache и сможете настроить кадрирование на уровне шаблонов.

Вот я наваял модуль http://www.opencart....ension_id=10702

Моодуль платный, так как сервис cloudinary.com меня не спонсировал.

А для чего лучше?

Можете объяснить как это может повлиять на саму стабильность работы и SEO ?

[toporchillo 614]

А для чего лучше?

Можете объяснить как это может повлиять на саму стабильность работы и SEO ?

Для магазинов, где много посетителей, тяжеловесный трафик (картинки) доставляется клиенту не с вашего сервера, а с CDN, где каналы пошире, а скорость загрузки картинок повыше.

SEO тут не при чем.

[kikasso 128]

Еще лучше хранить картинки в Облаках. Есть такой сервис cloudinary.com - облачный хостинг графики. Основная его фишка - обработка картинок на своей стороне: масштабирование, кадрирование, кадрирование вокруг лиц (определяет лица на фотографиях), скругление уголков, водяной знак,...

Таким образом вы избавляетесь от image/cache и сможете настроить кадрирование на уровне шаблонов.

Вот я наваял модуль http://www.opencart....ension_id=10702

Моодуль платный, так как сервис cloudinary.com меня не спонсировал.

Отличный сервис, но бесплатно дают всего 500 Мб + ваше расширение тоже платное. Этот вариант больше подойдет для тех кто всерьез задумался о клиентской оптимизации, а не просто столкнулся с вопросом "умного" масштабирования

[toporchillo 614]

Отличный сервис, но бесплатно дают всего 500 Мб + ваше расширение тоже платное. Этот вариант больше подойдет для тех кто всерьез задумался о клиентской оптимизации, а не просто столкнулся с вопросом "умного" масштабирования

Ну как бы да. Если вы задумываетесь о CDN, то значит у вас магазин посещаемый.

А что касается вашей дораьботкаи, то не понятно, зачем ради масштабирования притягивать phpthumb. Стандартными способами (GD) все делается.

Какая есть важная недоработка в OpenCart в ресайзе превьюшет - это то, что имена файлов-картинок с пробелами и не-урл-символами не экранируются. Большинство браузеров понимает, а вот экспорты-импорты тупят.

[kikasso 128]

Ну как бы да. Если вы задумываетесь о CDN, то значит у вас магазин посещаемый.

А что касается вашей дораьботкаи, то не понятно, зачем ради масштабирования притягивать phpthumb. Стандартными способами (GD) все делается.

Какая есть важная недоработка в OpenCart в ресайзе превьюшет - это то, что имена файлов-картинок с пробелами и не-урл-символами не экранируются. Большинство браузеров понимает, а вот экспорты-импорты тупят.

все можно написать самому, вопрос нужно ли? (риторический)

сложное масштабирование это ведь не 2 строчки кода, есть еще другие задачи...

[Solli 0]

А вот как выровнять чтобы высота автоматически подставлялась, а не фиксировано... То есть у меня в проекте изображения товаров из разный источников и мне необходимо чтобы они имели  естественное  соотношение сторон без полосок и обрезаний как в данном примере.

[kikasso 128]

А вот как выровнять чтобы высота автоматически подставлялась, а не фиксировано... То есть у меня в проекте изображения товаров из разный источников и мне необходимо чтобы они имели  естественное  соотношение сторон без полосок и обрезаний как в данном примере.

очень просто - используя функцию resize() указываете нужную ширину, высота будет рассчитываться пропорционально исходному изображению

например, вам нужно делать изображения с шириной 300px

require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
$thumb->resize(300)->save(DIR_IMAGE . $new_image, 'JPG');

пример, для масштабирования по высоте

require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
$thumb->resize(0, 300)->save(DIR_IMAGE . $new_image, 'JPG');

[Solli 0]

Оу! Супер!

Спасибо!

[Solli 0]

Но происходит ресайз по всем видам превьюхи согласно одному правилу. 

То есть  и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 300пх).

[kikasso 128]

Но происходит ресайз по всем видам превьюхи согласно одному правилу. 

То есть  и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 300пх).

оперируйте переменными $width, $height которые передаются в функцию и все у вас получиться

[Solli 0]

спасибо - буду пробовать.

[salexer 3]

Я как то поднимал эту тему для себя.

Было интересно воссоздать ресайз каталога "самым простым и удобным" методом.

 

Нашел в интернете небольшое пособие адаптивного формирования блоков под размер браузера.

Смысл в том, что каждый раз, при ресайзе окна, картинки группировались так, что не оставалось лишнего пространства.

 

Если кому интересно - могу выложить, где то валяется.

 

Там чуть проще вариант получился, чем Вы описали.

Ресайз получается осуществляется на стороне клиента.

А в опциях магазина ставится максимальное возможное изображение.

[sandi 0]

kikasso, как подправить под смарт, на сайте решение работает,

а при заходе со смартфона белый фон остается

[pachok89 3]

Огромное спасибо!!

[shishifr1 5]

Вставлю свои 5 копеек :)

 

2 функции - ресайз изображений с зумом (если не пропорционально, то картинка приближается для заполнения окна и белых полос нет)

 

Установка:

 

1) Открываем файл /catalog/models/tool/image.php и перед 

 

public function resize($filename, $width, $height) {

вставляем

 

	public function myresize($filename, $width, $height) {
		if (!file_exists(DIR_IMAGE . $filename) || !is_file(DIR_IMAGE . $filename)) {
			return;
		} 
		
		$info = pathinfo($filename);
		$extension = $info['extension'];
		
		$old_image = $filename;
		$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;
		
		if (!file_exists(DIR_IMAGE . $new_image) || (filemtime(DIR_IMAGE . $old_image) > filemtime(DIR_IMAGE . $new_image))) {
			$path = '';
			
			$directories = explode('/', dirname(str_replace('../', '', $new_image)));
			
			foreach ($directories as $directory) {
				$path = $path . '/' . $directory;
				
				if (!file_exists(DIR_IMAGE . $path)) {
					@mkdir(DIR_IMAGE . $path, 0777);
				}		
			}
			
			$image = new Image(DIR_IMAGE . $old_image);
			$image->myresize($width, $height);
			$image->save(DIR_IMAGE . $new_image);
		}
		
		if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
			return HTTPS_IMAGE . $new_image;
		} else {
			return HTTP_IMAGE . $new_image;
		}	
	}

2) Файл /system/library/image.php

 

перед

 

public function resize($width = 0, $height = 0) {

вставляем

 

public function myresize($width = 0, $height = 0) {
    	if (!$this->info['width'] || !$this->info['height']) {
			return;
		}

            $x = $this->info['width'];
            $y = $this->info['height'];

            // old images width will fit
            if(($x / $y) < ($width/$height)){
                $scale = $width/$x;
                $newX = 0;
                $newY = - ($scale * $y - $height) / 2;

            // else old image's height will fit
            }else{
                $scale = $height/$y;
                $newX = - ($scale * $x - $width) / 2;
                $newY = 0;
            }

            $image_old = $this->image;
            $this->image = imagecreatetruecolor($width, $height);

            $new_width =  $scale * $x;
            $new_height = $scale * $y;

            // now use imagecopyresampled
            imagecopyresampled($this->image, $image_old, $newX, $newY, 0, 0, $new_width, $new_height, $x, $y);

		if (isset($this->info['mime']) && $this->info['mime'] == 'image/png') {		
			imagealphablending($this->image, false);
			imagesavealpha($this->image, true);
			$background = imagecolorallocatealpha($this->image, 255, 255, 255, 127);
			imagecolortransparent($this->image, $background);
		} else {
			$background = imagecolorallocate($this->image, 255, 255, 255);
		}
        imagedestroy($image_old);
           
        $this->info['width']  = $width;
        $this->info['height'] = $height;
    }

 

3) теперь везде используется пока стандартная функция ресайза. Если вы хотите использовать новую, например в категории (в списке отображения товаров), то вам нужно открыть файл /catalog/controller/product/category.php, найти там $this->model_tool_image->resize и заменить на $this->model_tool_image->myresize. И так везьде где вам нужно. Не забудьте зайти потом в папку /image/cache/data  и удалить кшированые изображения со старым ресайзом

[Solli 0]

Но происходит ресайз по всем видам превьюхи согласно одному правилу. 

То есть  и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 300пх).

оперируйте переменными $width, $height которые передаются в функцию и все у вас получиться

 

revenons a nos moutons

решение проблемы было топорным но эффективным

/catalog/model/tool/image.php

(на всякий случай закомментировал дефолтные строки )

/*$image = new Image(DIR_IMAGE . $old_image);
$image->resize($width, $height);
$image->save(DIR_IMAGE . $new_image);*/
//image adaptive resize
require_once (DIR_BASE.'vendor/ThumbLib/ThumbLib.php');
$thumb = PhpThumbFactory::create(DIR_IMAGE . $old_image);
//$thumb->adaptiveResize($width, $height)->save(DIR_IMAGE . $new_image, 'JPG');
$thumb->resize($width, $height)->save(DIR_IMAGE . $new_image, 'JPG');

 

 

 

/catalog/controller/product/category.php

 

$image = $this->model_tool_image->resize($result['image'], $this->config->get('config_image_product_width'), $this->config->get('config_image_product_height'));

 

заменяем аргументы $this->config->get

На необходимые числа

$image = $this->model_tool_image->resize($result['image'],0,120);

 

где первая цифра ширина (0 === auto), вторая высота изображения

В данном примере рассмотрен вариант с ресайзом миниатюр изображений товаров в категории товара - аналогично необходимо искать в и для товаров  в /catalog/controller/product/product.php

 

 

Позже попробую разобраться, как отключить валидацию (проверку на 0/пустоту) в настройках магазина - устранив этот баг - отпадет необходимость в моем костыле.

[GalaxyHero 2]

Вставлю свои 5 копеек :)

 

на оксторе 1.5.4.1 ничего не изменилось ((

[Chenom0r 14]

Здравствуйте, я создал тему в соседней ветке форума, но уже позже нашел это обсуждение.
Моя тема: https://opencartforum.com/topic/21816-razmer-failov-fotografii-uvelichivaetsia-posle/

 

но наверное о ресайзе корректнее продолжить здесь, поэтому скопирую текст сюда:

 

Обнаружил весьма неприятную особенность в OS Store 1.5.4.1.

Размер большого изображения в настройках магазина установлен в 1590 х 1910 px

Все фотографии перед загрузкой редактируются в Photoshop и их размер составляет именно 1590 х 1910 px. Это было сделано специально, чтобы движок не "трогал" большие фотографии. Важно обеспечить максимальное качество снимков.

Опытным путем был определен максимальный размер файла - не более 300 KB. Соответственно ВСЕ фотографии имеют размер не более 300 KB.

Файлы загружаются по FTP в /image/data и добавляются в карточку товара стандартным способом, но при просмотре карточки товара в браузере размер файла каждой фотографии становится существенно больше.

 

Пример:

оригинальный файл: /image/data/tovar1/photo-1.lpg : 300 KB

в карточке товара в браузере:  photo-1-1590x1910.jpg : 979 КБ

в /image/cache/data/tovar1/photo-1-1590x1910.jpg : 979 KB

 

одна фотография имеет размер даже 1034 KB!!! Мегабайт... Офигеть!    :shock:
 

Подскажите, пожалуйста, как мне решить эту проблему. Фотографии такого размера не приемлемы - для пользователей с медленным каналом связи магазин будет работать отвратительно медленно.

Как запретить движку "оптимизировать" фотографии, размер которых по ширине и высоте не меняется относительно оригинального?

 

Буду очень признателен за помошь. Я просто извелся уже весь, пытаясь самостоятельно понять.

[Solli 0]

где то в настройках системных либ (библиотек) есть степень сжатия.... Сам вот задумался на днях об этом... И это таки невероятно важный аспект!

Как вариант - не использовать функцию resize, а каким то образом использовать переменную $old_image

Давайте подумаем вместе.

[Solli 0]

Нашел настройки изображения в

\system\library\image.php

    public function save($file, $quality = 75) {
		$info = pathinfo($file);
       
		$extension = strtolower($info['extension']);
   		
		if (is_resource($this->image)) {
			if ($extension == 'jpeg' || $extension == 'jpg') {
				imagejpeg($this->image, $file, $quality);

 

В моем случае стояло по дефолту 90 - в документации php.net для метода imagejpeg() сказано что последний аргумент - это качество создаваемого вновь изображения - но при попытках выставить 0 или 100 ничего не менялось - размер тот же.

 

НАШЕЛ РЕШЕНИЕ

\vendor\ThumbLib\GdThumb.inc.php

$defaultOptions = array 
 (
  'resizeUp'                     => false,
  'jpegQuality'                  => 90,
  'correctPermissions'           => false,
  'preserveAlpha'	         => true,
  'alphaMaskColor'               => array (255, 255, 255),
  'preserveTransparency'	 => true,
  'transparencyMaskColor'        => array (0, 0, 0)
  );
}

 

jpegQuality = 90 менять на свой вкус - в Photoshop через Ctrl+Shift+Alt+S сохраняет на высоком качестве 60% (то есть в нашем случае 60 или до 75)

Edited May 21, 2013 by Solli

[shishifr1 5]

Вставлю свои 5 копеек :)

 

на оксторе 1.5.4.1 ничего не изменилось ((

Обязательно надр очистить /image/cache/data 

[Chenom0r 14]

поигрался со степенью сжатия jpg. Ну это совсем не то. 

Во первых я УЖЕ обработал фотографии. И потратил довольно много усилий, чтобы фотография была в приемлемом касестве при приемлемом размере файла.

В итоге я получаю в магазине второй раз пережатое фото с ухудшением качества, видным невооруженым взглядом, все-равно увеличившийся размер файла.

 

То есть теперь при сжатии 60 файл без уменьшения физических размеров имеет худшее качество и объем 521 КБ вместо исходных 300 КБ.

 

Прошу помощи как запретить движку оптимизировать изображение, если его размер по ширине и высоте соответствует заданому в настройках магазина размеру большого фото?

Ведь по логике вещей нужно просто скопировать фотографию в папку cache и переименовать ее соотвествующим образом.

[toporchillo 614]

Прошу помощи как запретить движку оптимизировать изображение, если его размер по ширине и высоте соответствует заданому в настройках магазина размеру большого фото?

Ведь по логике вещей нужно просто скопировать фотографию в папку cache и переименовать ее соотвествующим образом.

Так это уже сделано.

model/tool/image.php

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $old_image);
				$image->resize($width, $height);
				$image->save(DIR_IMAGE . $new_image);
			} else {
				copy(DIR_IMAGE . $old_image, DIR_IMAGE . $new_image);
			}