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

[kikasso]

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

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

[Гость brk]

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

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

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

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

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

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

[kikasso]

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

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

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

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

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

[kikasso]

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

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

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

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

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

[Solli]

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

[kikasso]

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

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

Оу! Супер!

Спасипотому что!

[Solli]

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

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

[kikasso]

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

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

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

[Solli]

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

[salexer]

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

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

 

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

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

 

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

 

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

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

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

[sandi]

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

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

[pachok89]

Огромное спасипотому что!!

[shishifr1]

Всивлю свои 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]

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

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

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

 

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

[Chenom0r]

Здравствуйте, я создал тему в соседней ветке форума, но уже позже нашел это обсужгдение.
Моя тема: https://opencart-forum.ru/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]

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

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

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

[Solli]

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

\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)

Изменено 21 мая 2013 пользователем Solli

[shishifr1]

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

 

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

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

[Chenom0r]

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

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

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

 

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

 

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

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

[Chenom0r]

ну может и сгделано, но по факту ситуация ровно икова, какой я ее описываю.

[Chenom0r]

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

Странно

[Chenom0r]

В дополнение к предыдуещёму посту. При загрузке шитными средствами не все ".ок"

Я использую Image Manager +, который позволяет загружать на сервер в папку по несколько картинок

 

1. файлы переименовываются при загрузке: мои файлы называются по шаблону site-brand-model-x.jpg, ггде x - номер фотографии. IM+ убирает все гдефисы и файл называет sitebrandmodelx.jpg

2. При аплоагде в папку на сервере файл ужимается до 500х600px и именно поэтому у меня вчера вечером после загрузки создалось ощуещёние, что все отлично. Конечно файл бугдет весить 100КБ при иких размерах, но увеличенное изображение товара все в квадратиках, т.к. движок его растягивает. 

 

По мере погружения в проблему вопросов все потому чтольше:
1. Какова практика рилиты с изображениями в OpenCart? Каким средствами их стоит загружать при наполнении магазина сотнями или тысячами карточек товаров? Стоит ли грузить все фото по FTP, а потом привязывать их к карточке товара, или нужно пользоваться исклюлительно загрузликом изображений в карточке товара?
2. Как запретить оптимизировать фотографии при загрузке их на сервер шитно через загрузлик в карточке товара, ведь потом при помеещёнии фотографий в кэш они оптимизируются повторно?

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

3. 
 

[Solli]

Вариант в вашем случае в контроллере /catalog/controller/product/product.php копать в  сторону $this->model_tool_image->resize , а точнее resize заменить на просто image или похожее (копать в сторону могдели наверное) - только догадка