Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Адаптивный 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
Надіслати
Поділитися на інших сайтах

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

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

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

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

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

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

Надіслати
Поділитися на інших сайтах

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

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

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

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

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

Надіслати
Поділитися на інших сайтах

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

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

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

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

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

Надіслати
Поділитися на інших сайтах

  • 1 month later...

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

Надіслати
Поділитися на інших сайтах


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

очень просто - используя функцию 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
Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах

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

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

 

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

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

 

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

 

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

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

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

Надіслати
Поділитися на інших сайтах


  • 2 weeks later...

Вставлю свои 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
Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах


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

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

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

 

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

Надіслати
Поділитися на інших сайтах


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

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

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

Надіслати
Поділитися на інших сайтах


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

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

Змінено користувачем Solli
Надіслати
Поділитися на інших сайтах


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

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

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

 

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

 

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

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

Надіслати
Поділитися на інших сайтах


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

Странно

Надіслати
Поділитися на інших сайтах


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

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

 

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

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

 

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

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

3. 
 

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.