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

kikasso · March 21, 2013

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

Для решения этой задачи, предлагаю использовать библиотеку - 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 · March 22, 2013

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

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

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

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

March 22, 2013

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

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

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

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

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

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

toporchillo · March 22, 2013

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

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

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

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

kikasso · March 22, 2013

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

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

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

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

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

toporchillo · March 22, 2013

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

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

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

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

kikasso · March 22, 2013

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

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

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

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

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

Solli · April 25, 2013

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

kikasso · April 25, 2013

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

очень просто - используя функцию 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 · April 26, 2013

Оу! Супер!

Спасибо!

Solli · April 26, 2013

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

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

kikasso · April 26, 2013

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

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

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

Solli · April 29, 2013

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

salexer · April 29, 2013

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

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

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

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

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

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

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

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

sandi · May 8, 2013

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

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

pachok89 · May 13, 2013

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

shishifr1 · May 16, 2013

Вставлю свои 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 · May 17, 2013

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

То есть и в категориях и в товарах и в списке рекомендуемых и в модулях один размер (в моем случае ресайз по высоте 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 · May 19, 2013

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

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

Chenom0r · May 20, 2013

Здравствуйте, я создал тему в соседней ветке форума, но уже позже нашел это обсуждение.
Моя тема: 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 · May 21, 2013

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

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

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

Solli · May 21, 2013

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

\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 · May 21, 2013

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

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

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

Chenom0r · May 24, 2013

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

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

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

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

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

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

toporchillo · May 24, 2013

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

Ведь по логике вещей нужно просто скопировать фотографию в папку 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);
			}

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

Recommended Posts

kikasso 126

Share this post

Link to post

Share on other sites

toporchillo 530

Share this post

Link to post

Share on other sites

Guest brk

Share this post

Link to post

Share on other sites

toporchillo 530

Share this post

Link to post

Share on other sites

kikasso 126

Share this post

Link to post

Share on other sites

toporchillo 530

Share this post

Link to post

Share on other sites

kikasso 126

Share this post

Link to post

Share on other sites

Solli 0

Share this post

Link to post

Share on other sites

kikasso 126

Share this post

Link to post

Share on other sites

Solli 0

Share this post

Link to post

Share on other sites

Solli 0

Share this post

Link to post

Share on other sites

kikasso 126

Share this post

Link to post

Share on other sites

Solli 0

Share this post

Link to post

Share on other sites

salexer 3

Share this post

Link to post

Share on other sites

sandi 0

Share this post

Link to post

Share on other sites

pachok89 1

Share this post

Link to post

Share on other sites

shishifr1 5

Share this post

Link to post

Share on other sites

Solli 0

Share this post

Link to post

Share on other sites

GalaxyHero 2

Share this post

Link to post

Share on other sites

Chenom0r 14

Share this post