Post by masterross » Mon Jun 03, 2019 12:56 am

Hi,

Guys, could you help me?
I want EXIF to be left intact on upload and then re-sized in the cache.
Any ideas?

Thank you!

EDIT.

Actually on upload EXIF is there.
Only on resize is destroyed

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by ADD Creative » Mon Jun 03, 2019 7:59 pm

The PHP GD library OpenCart uses to resize the image won't support EXIF. If it's only a few image your could try resizing yourself and uploading with the correct filename.

If you need automation, you'll have to look for another image library that support EXIF and get a developer to integrate it into OpenCart.

www.add-creative.co.uk


Expert Member

Posts

Joined
Sat Jan 14, 2012 1:02 am
Location - United Kingdom

Post by masterross » Mon Jun 03, 2019 9:44 pm

Hi,

I could read EXIF with exif_read_data before resizing in \system\library\image.php dont know how to write it back in the new image.

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by ADD Creative » Tue Jun 04, 2019 2:46 am

I don't believe there are any built in PHP functions to do that. You would have to work out the format and write it yourself or use a third-party library.

www.add-creative.co.uk


Expert Member

Posts

Joined
Sat Jan 14, 2012 1:02 am
Location - United Kingdom

Post by IP_CAM » Tue Jun 04, 2019 4:31 am

Might be be worth to try Imagick, to find out, what happen ... ;)
It's just one file, replacing the default system/library/image.php File.
And if it does not work, just replace it by the OC default File again.
Should probably work with v.2.3.0.2 too, it even works with 1.5.6.x.
Ernie
---
Imagick Library free, OC v.2.0.0.0 - 2.2.0.0
https://www.opencart.com/index.php?rout ... n_id=23443
---
Image

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by masterross » Tue Jun 04, 2019 5:30 am

Thanks mate,

i tested your code and it works on v2.3 but the EXIF data is still stripped :(


EDIT:
Strange I test resize from commad line:

Code: Select all

convert -limit memory 32 -limit map 64 ross_exif-500x500.jpg -units PixelsPerInch -density 72 -quality 90 -resize 1500 targetfile.jpg
And it preserves the EXIF.
hm....

EDIT 2:
When using square image EXIF is OK.
But if height != width EXIF is missing.

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by masterross » Wed Jun 26, 2019 8:44 am

@IP_CAM

Just found a typo:

Code: Select all

if ($width == $height && $this->_info['width'] != $this->_info['height']) {
in public function resize($width = 0, $height = 0, $default = false) {

should be:

Code: Select all

if ($width != $height && $this->_info['width'] != $this->_info['height']) {
Right?

But whit this the new image doesnt have EXIF data.

I found this:
https://stackoverflow.com/questions/377 ... ick-in-php

But cant handle myself.
Can you help?

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by straightlight » Wed Jun 26, 2019 8:58 am

But cant handle myself.
Can you help?
Those instructions on StackOverFlow are for ImageMagick library while the OC core uses the GD Library.

Dedication and passion goes to those who are able to push and merge a project.

Regards,
Straightlight
Programmer / Opencart Tester


Legendary Member

Posts

Joined
Mon Nov 14, 2011 11:38 pm
Location - Canada, ON

Post by masterross » Wed Jun 26, 2019 4:19 pm

@straightlight

Hi mate,

I'm using Imagick:
IP_CAM wrote:
Tue Jun 04, 2019 4:31 am
Imagick Library free, OC v.2.0.0.0 - 2.2.0.0
https://www.opencart.com/index.php?rout ... n_id=23443
---
Image
And as I said I found this typo but after correct it the composite new image is missing EXIF.

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by IP_CAM » Thu Jun 27, 2019 7:51 am

masterross wrote:
Wed Jun 26, 2019 8:44 am
@IP_CAM . Just found a typo:

Code: Select all

if ($width == $height && $this->_info['width'] != $this->_info['height']) {
should be:

Code: Select all

if ($width != $height && $this->_info['width'] != $this->_info['height']) {
Right? Can you help?
Infortunately not, but your finding might now have solved a 'height' problem in my Code,
as I found out during one of my Tests. I forgot, where exactly it occurred, but I will find
out, by now testing it again. Thanks a lot for the fix, but such exeeds my coder wisdom,
otherways, I would be rich & famous :laugh:

I just compared IMagick with GD - Thumbs Pic Data Sizes, and I would tend to use
Image Magick, to so end up with a few GTMETRIX -tuned image downloads only, in
order to get a top result on that.

Good Luck !
Ernie
---
Image

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by masterross » Thu Jun 27, 2019 8:51 pm

Hi guys,

I'm trying other code but need help cause I'm not a real codder:

Code: Select all

        if ($width != $height && $this->_info['width'] != $this->_info['height']) {

            // Set original
            $original = $this->_image;

            // Create layout
            $this->_image = new Imagick($original);
            $this->_image->setBackgroundColor('white');
            $this->_image->setGravity(imagick::GRAVITY_CENTER);
            // Composite
            $x = round(($width - $original->getImageWidth()) / 2);
            $y = round(($height - $original->getImageHeight()) / 2);

            $this->_image->extentImage( $width, $height, $x, $y);

        }
But getting:

Code: Select all

PHP Fatal error:  Uncaught ImagickException: Can not process empty Imagick object in /home/ladylen/public_html/system/library/image.php:85
Stack trace:
#0 /home/ladylen/public_html/system/library/image.php(85): Imagick->extentimage('450', '650', 9, 0)
#1 /home/ladylen/public_html/system/storage/modification/catalog/model/tool/image.php(50): Image->resize('450', '650')
#2 /home/ladylen/public_html/vqmod/vqcache/vq2-system_storage_modification_system_engine_loader.php(207): ModelToolImage->resize('catalog/lady_le...', '450', '650')
#3 /home/ladylen/public_html/system/engine/proxy.php(25): Loader->{closure}(Array, Array)
#4 /home/ladylen/public_html/vqmod/vqcache/vq2-system_storage_modification_catalog_controller_product_product.php(443): Proxy->__call('resize', Array)
#5 /home/ladylen/public_html/vqmod/vqcache/vq2-system_storage_modification_system_engine_action.php(51): ControllerProductProduct->index()
#6 /home/ladylen/public_html/catalog/controller/startup/router.php(25): Action->execute(Object(Registry))
#7 /home/ladylen/pub in /home/ladylen/public_html/system/library/image.php on line 85
[root@wipm019 logs]# nano -w /home/ladylen/public_html/system/library/image.php
Can you help me?

UPDATE:

I got it worked but the image is not centered.
Looks like

Code: Select all

 $this->_image->setGravity(imagick::GRAVITY_CENTER);
Is not accepted:

Code: Select all

        if ($width != $height && $this->_info['width'] != $this->_info['height']) {

            $original = $this->_image;

            // Create layout
//            $this->_image = new Imagick($original);
            $this->_image->setImageBackgroundColor('white');
            $this->_image->setGravity(imagick::GRAVITY_CENTER);
            // Composite
            $x = round(($width - $original->getImageWidth()) / 2);
            $y = round(($height - $original->getImageHeight()) / 2);

            $this->_image->extentImage( $width, $height, $x, $y);
        }
UPDATE 2:
Fixed!
Enjoy the full working code :)

Code: Select all

        if ($width != $height && $this->_info['width'] != $this->_info['height']) {

            $original = $this->_image;

            // Create layout
            $this->_image->setImageBackgroundColor('white');
            $this->_image->setGravity(Imagick::GRAVITY_CENTER);
            // Composite
            $x = round(($width - $original->getImageWidth()) / 2);
            $y = round(($height - $original->getImageHeight()) / 2);

            $this->_image->extentImage( $width, $height, -$x, -$y);

        }

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by masterross » Fri Jun 28, 2019 6:07 pm

Found another bug

Code: Select all

    public function save($file, $quality = 10) {

        // Set image compression
        $this->_image->setCompressionQuality($quality);

        // Set image format
        $this->_image->setImageFormat($this->_info['mime']);

        // Write image to the disk
        $this->_image->writeImage($file);
    }
Looks like
// Set image compression
$this->_image->setCompressionQuality($quality);
Does not accepted.

Tested from 10 to 100 - no difference.
Will investigate...

UPDATE:

this:

Code: Select all

        // Set image compression
        $this->_image->setCompressionQuality($quality);
Should be:

Code: Select all

        // Set image compression
        $this->_image->setImageCompressionQuality($quality);

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by masterross » Sat Jun 29, 2019 3:24 pm

Another bug found:

Code: Select all

'mime'   => $this->_image->getFormat()
Should be:

Code: Select all

'mime'   => $this->_image->getImageFormat()

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by masterross » Sat Jun 29, 2019 3:33 pm

@IP_CAM

I added jpeg optimization:

Code: Select all

    public function save($file, $quality = 70) {

        // Set image compression
        $this->_image->setImageCompressionQuality($quality);

        // Set image format
        $this->_image->setImageFormat($this->_info['mime']);

        // Optimize
        if ($this->_info['mime'] == 'JPEG') {
        $this->_image->setInterlaceScheme(Imagick::INTERLACE_JPEG);
        $this->_image->setColorspace(Imagick::COLORSPACE_SRGB);
        $this->_image->setSamplingFactors(array('2x2', '1x1', '1x1'));
        }

        // Write image to the disk
        $this->_image->writeImage($file);
    }


Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by IP_CAM » Sun Jun 30, 2019 2:22 am

Well, I had no problems with the Thumbs data size and quality, according
to GTMetrix.com, but the Imagick Code changes the Thumb Height on some
Products, to an extend, where it breaks my 'height' thumb settings, and so
creates different Grid View Section HEIGHT values, looking like sh.. this way.
But that breaks my knowledge, :'( and so, I switched back to GD for the time
beeing.
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by masterross » Sun Jun 30, 2019 6:26 am

@IP_CAM

This optimization is according to PageSpeed recommendations.
However, gtmetrix doesn't like EXIF :)
Bellow is the full working code.
If you want to remove EXIF uncomment the corresponding line.
Regards!

Code: Select all

<?php

/**
 * LICENSE
 *
 * This source file is subject to the GNU General Public License, Version 3
 * It is also available through the world-wide-web at this URL:
 * http://www.gnu.org/copyleft/gpl.html
 *
 * @category   OpenCart
 * @package    Imagick Library for OpenCart 2.0
 * @copyright  Copyright (c) 2015 Eugene Lifescale by OpenCart Ukrainian Community (http://opencart-ukraine.tumblr.com)
 * @license    http://www.gnu.org/copyleft/gpl.html GNU General Public License, Version 3
 */

class Image {

    private $_image;
    private $_info;

    public function __construct($file) {

        if (file_exists($file)) {

            $this->_image = new Imagick();
            $this->_image->readImage($file);

            $this->_info = array(
                'width'  => $this->_image->getImageWidth(),
                'height' => $this->_image->getImageHeight(),
                'bits'   => $this->_image->getImageLength(),
                'mime'   => $this->_image->getImageFormat()
            );

        } else {
            exit('Error: Could not load image ' . $file . '!');
        }
    }

    public function save($file, $quality = 70) {

        // Set image compression
        $this->_image->setImageCompressionQuality($quality);

        // Set image format
        $this->_image->setImageFormat($this->_info['mime']);

	    // Optimize
	if ($this->_info['mime'] == 'JPEG') {
	$this->_image->setInterlaceScheme(Imagick::INTERLACE_JPEG);
	$this->_image->setColorspace(Imagick::COLORSPACE_SRGB);
	$this->_image->setSamplingFactors(array('2x2', '1x1', '1x1'));
	}
    
        // Strip EXIF

        // $this->_image->stripImage();

        // Write image to the disk
        $this->_image->writeImage($file);
    }

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

        // Default behavior required
        if (!$this->_info['width'] || !$this->_info['height']) {
            return;
        }

        switch ($default) {
            case 'w':
                $height = $width;
                break;
            case 'h':
                $width  = $height;
                break;
        }

        // Resize image
        $this->_image->resizeImage($width, $height, false, 1, true);


        if ($width != $height && $this->_info['width'] != $this->_info['height']) {

            $original = $this->_image;

            // Create layout

            $this->_image->setImageBackgroundColor('white');
            $this->_image->setGravity(Imagick::GRAVITY_CENTER);
            
            // Composite
            $x = round(($width - $original->getImageWidth()) / 2);
            $y = round(($height - $original->getImageHeight()) / 2);

            $this->_image->extentImage( $width, $height, -$x, -$y);

        }

        // Update dimensions
        $this->_info['width']  = $width;
        $this->_info['height'] = $height;
    }

    public function watermark($file, $position = 'bottomright') {

        // Create watermark image
        $watermark = new Imagick($file);

        // Composite position
        switch($position) {

            case 'overlay':
                for ($w = 0; $w < $this->_info['width']; $w += $watermark->getImageWidth()) {
                    for ($h = 0; $h < $this->_info['height']; $h += $watermark->getImageHeight()) {
                        $this->_image->compositeImage($watermark, Imagick::COMPOSITE_OVER, $w, $h);
                    }
                }
                break;
            case 'topleft':
                $this->_image->compositeImage($watermark,
                                             Imagick::COMPOSITE_OVER,
                                             0,
                                             0);
                break;
            case 'topright':
                $this->_image->compositeImage($watermark,
                                             Imagick::COMPOSITE_OVER,
                                             $this->_info['width'] - $watermark->getImageWidth(),
                                             0);
                break;
            case 'bottomleft':
                $this->_image->compositeImage($watermark,
                                             Imagick::COMPOSITE_OVER,
                                             0,
                                             $this->_info['height'] - $watermark->getImageHeight());
                break;
            case 'bottomright':
                $this->_image->compositeImage($watermark,
                                             Imagick::COMPOSITE_OVER,
                                             $this->_info['width']  - $watermark->getImageWidth(),
                                             $this->_info['height'] - $watermark->getImageHeight());
                break;
        }
    }

    public function crop($top_x, $top_y, $bottom_x, $bottom_y) {

        // Crop image
        $this->_image->cropImage($top_x, $top_y, $bottom_x, $bottom_y);

        // Update dimensions
        $this->_info['width']  = $bottom_x - $top_x;
        $this->_info['height'] = $bottom_y - $top_y;
    }

    public function rotate($degree, $color = 'FFFFFF') {

        // Rotate image
        $this->_image->rotateimage($color, $degree);
    }
}

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by IP_CAM » Sun Jun 30, 2019 11:16 pm

Well, it works ok by use of that Imagick image file, but on the Product Page,
the vertical height value of the Thumbs changes, and that does not really
look great. I have to check, if that 'problem' is related with my Merkent Theme,
or if it will do the same by use of the OC-2 to 1.5 Theme as well.

And if I test a Category Page by GTMetrix, this VALUE:
public function save($file, $quality = 90) {
enlarges the total image file size a little, but it also results in less images,
advised to further be shrinked, to match best: ::)
Optimize the following images to reduce their size by 123B (1% reduction).
Ernie
---
Sample Product Page:
http://www.opencart.li/bright/Brodmann- ... 34c39.html
---
Image

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by masterross » Mon Jul 01, 2019 12:11 am

Hi,
Your Additional Product Image Size (W x H) in the product page is set by the theme 90x60.
However, I see that in some products real images thumbs are 60x60.
For example here:
http://www.opencart.li/bright/Abgrenzen ... 34c39.html

Code: Select all

<img src="http://opencart.li/bright/image/cache/data/demo/image_opensh651-90x60.jpg" title="Abgrenzen research" alt="Abgrenzen research" width="90" height="60">
and the div canvas expands to 90x90.

Maybe you didn't clear whole cache?
Or If you want square thumbs you need to set Additional Product Image Size (W x H) to 90x90.
I use quality 70. It depends on your needs and the size (W x H) and what is shown on the image.

Pottery Glaze shop


New member

Posts

Joined
Mon Jan 02, 2017 7:07 pm

Post by IP_CAM » Mon Jul 01, 2019 4:39 am

Your Additional Product Image Size (W x H) in the product page is set by the theme 90x60.
Well, regardless of my Image Settings, the 'Merkent' Theme-specific Image 'sizing'
Routines don't care much about my wishes. It therefore depends on the Theme used,
not only on the Imagick Code, to get the image-height values as planned, I guess.

This would result, in some images, in even smaller image Data Sizes, compared to GD!
But a smaller image size does no automatically improve GTMetrix Results, as I found
out, after now setting the compressing Value to ZERO (100) in the (1.5.6.x)
system/library/image.php file.

Code: Select all

public function save($file, $quality = 100) {
I so only needed to download 2 GTMetrix-cached images, instead of about 12
on an 18 product Category Page tested, to replace existing one's on the Server.
And despite of resulting in a 'larger' total amount of Data tested, I did not get
punished for this with a single percentage point, but have even better Thumb
images to show. :D

But since I also use 'pre-cleaned' Master images already, it's not really comparable
with most 'standart' installations anyway, where images are used, :laugh: as they have
been found somewhere ....

I will try the Imagick File on my other Software, using OC v.2.0.x style based Theme
Technology, to find out, if it works with that Image Height Value.

Thanks a lot for your assistance! :)
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by IP_CAM » Tue Apr 07, 2020 9:10 am

Just to complete this Topic, I found an Imagick type system/library/image.php File,
replacing the OC default PHP GD library -based Image Handling with ImageMagick
in full, and without any misses, like breaking the GRID View Height Limits set, as it used
to be the case with former ImageMagick OC Extensions in my OC-2 type Bootstrap Themes.

I already had it in my Github Repositories, unaware of, that it works so well. And I got superb
GTMetrix, Real Site Speed, and Google Tester Results, without the need, to rework a single
thumb, as it was the case before, when I accidentally cleaned out the Image Cache Subs,
always also containing some 'handmade' compressed Pics, after GTMETRIX told me to ... :crazy:
And this with the default function SAVE setting of: $quality = 90!
And the File worked on Spot even with my OC v.1.5.6.x based Version ;)

Ernie
---
Imagick System File Replacement for the OC Default image.php File:
https://github.com/IP-CAM/Opencart-Imagick-Library
---
Image
---
https://gtmetrix.com/reports/www.jti.li/Ja0LUnyU

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland
Who is online

Users browsing this forum: No registered users and 282 guests