Jump to content
kikasso

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

Recommended Posts

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

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

  • +1 6

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites
Guest brk

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

Share this post


Link to post
Share on other sites

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

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

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

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

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

очень просто - используя функцию 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');
  • +1 2

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

 

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

 

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

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Вставлю свои 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  и удалить кшированые изображения со старым ресайзом

  • +1 1

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

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

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

Share this post


Link to post
Share on other sites

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

\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 by Solli

Share this post


Link to post
Share on other sites

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

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

 

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
You are posting as a guest. If you have an account, please sign in.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.