Post by wedhaaf » Thu Dec 17, 2009 11:31 am

Can someone give solution about how to produced transparent product and category image?

It seems that we'll never get images in its original type rather than JPG. After having a lot of time to search in this forum and trying many time to upload PNG image -stupid thing -, I got this conclusion : all product and category images will never give any transparency at all, even if the original image is in PNG?

It looks like that all images will be cached to JPG rather than its original type. I assume that there are something to do with the script, but I don't know which one is. I'm just guessing and not a coder.

I think it's important for me to have these product and category image, especially PNG type, keep in its original type. It'll allow me or many of us to have flexibility to design the website.

Anyone have solution, please?

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by Qphoria » Thu Dec 17, 2009 12:17 pm

It looks like this may be helpful
http://www.php.net/manual/en/function.i ... .php#85754

In the image class I don't see this alphablending support

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by wedhaaf » Thu Dec 17, 2009 12:28 pm

Thanks Q, I read that manual too, and googling a lot. But the problem is, the image still convert to JPG. So there will be no transparency that I can use it for the background of a page "show off".

As I mentioned before, I'm not a coder. I do experimenting "trial and error" with the functions, and nothing's changed. I don't know exactly which one from the functions should be modify, so it can be implemented to all image type.

Perhaps Daniel have spare time to give solution, or could you Q? ;)

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by Qphoria » Thu Dec 17, 2009 2:06 pm

Well that's an easy fix.

1. EDIT: system/helper/image.php

2. FIND:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.jpg';
3. REPLACE WITH:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . end(explode(".", $filename));
but i think the imagefrompng functions still need the alphablending functions for transparency.. not sure. Try it out

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by wedhaaf » Thu Dec 17, 2009 11:29 pm

Qphoria wrote:Well that's an easy fix.

1. EDIT: system/helper/image.php

2. FIND:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.jpg';
3. REPLACE WITH:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . end(explode(".", $filename));

I tried it and it gives me warning in administration page :
Unknown: Only variables should be passed by reference in C:\Program Files\VertrigoServ\www\system\helper\image.php on line 8
What should I do then?

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by Qphoria » Fri Dec 18, 2009 12:08 am

php can be so finicky sometimes. Works on some versions... but it is true that its not the most proper code.

Undo that edit and try this:

1. EDIT: system/helper/image.php

2. FIND:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.jpg';
3. REPLACE WITH:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . get_file_extension($filename);
4. FIND:

Code: Select all

?>
5. BEFORE, ADD:

Code: Select all

function get_file_extension($filename) {
    $path_info = pathinfo($filename);
    return $path_info['extension'];
}
This will keep the right name. but it still is a jpeg image. have to do more tracing as to where it converts

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by wedhaaf » Fri Dec 18, 2009 12:29 am

Qphoria wrote:
3. REPLACE WITH:

Code: Select all

$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . get_file_extension($filename);
4. FIND:

Code: Select all

?>
5. BEFORE, ADD:

Code: Select all

function get_file_extension($filename) {
    $path_info = pathinfo($filename);
    return $path_info['extension'];
}
This will keep the right name. but it still is a jpeg image. have to do more tracing as to where it converts
Yes, it works nicely. You're right Q, even the file's extension shows a PNG, but it is still in JPG type ??? .

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by Qphoria » Fri Dec 18, 2009 1:40 am

I did some more playing... i used functions to set the alpha for transparency, but it ended up just changing the background black but not transparent and it was still showing as a jpeg. I followed the example in the php discussion but didn't get the results they claimed

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by wedhaaf » Fri Dec 18, 2009 1:59 am

Qphoria wrote:I did some more playing... i used functions to set the alpha for transparency, but it ended up just changing the background black but not transparent and it was still showing as a jpeg. I followed the example in the php discussion but didn't get the results they claimed
Yes, me either. I tried to use these functions which are actually don't work for me :
- imagefilledrectangle; remove it and hoping to get transparency bakground but black solid color I got
- imagecolorallocate to imagecolorallocatealpha; alpha transparency doesn't work either.

But, when I tried use this code :

Code: Select all

$background = imagecolorallocatealpha($this->image,0, 0, 0, 127);
imagealphablending($this->image, false);

imagefilledrectangle($this->image, 0, 0, $width, $height, $background);
imagealphablending($this->image, true);
imagesavealpha($this->image,true);

imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
it gave me bakground stripped black. ???

These things are getting me frustated. >:(
Is this about php bug or not?

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by JNeuhoff » Fri Dec 18, 2009 3:26 am

This kind of drawing only works for truecolor images, not on palette images.

Truecolor images are normally created with the imagecreatetruecolor function.

Export/Import Tool * SpamBot Buster * Unused Images Manager * Instant Option Price Calculator * Number Option * Google Tag Manager * Survey Plus * OpenTwig


User avatar
Guru Member

Posts

Joined
Wed Dec 05, 2007 3:38 am


Post by wedhaaf » Fri Dec 18, 2009 4:00 am

JNeuhoff wrote:This kind of drawing only works for truecolor images, not on palette images.

Truecolor images are normally created with the imagecreatetruecolor function.
$image_old = $this->image;
$this->image = imagecreatetruecolor($width, $height);
$background = imagecolorallocatealpha($this->image,0, 0, 0, 127);
imagealphablending($this->image, false);

imagefilledrectangle($this->image, 0, 0, $width, $height, $background);
imagealphablending($this->image, true);
imagesavealpha($this->image,true);

imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
Actually that code also use imagecreatetruecolor function.

And it seems that ImageCopyResampled function performs like ImageCreateFromJPEG which have to be initiated with imagecreatetruecolor. This one I noted from php dev team :
ImageCopyResampled(resource img_dst, resource img_org, int Xdst, int Ydst, int Xorg, int Yorg, int width_dst, int height_dst, int width_org, int height_org, int col) ... int col is default background color for internal call to ImageCreateTrueColor

That's why all the images keep JPG type, even though they are PNGs.

I think this is just a php issue. The conclusion is OpenCart will not have transparent product and category image until there's an addition to ImageCopyResampled function.

:( I hope there's another "patch" for this ...

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by wedhaaf » Sun Dec 20, 2009 2:47 am

What I mentioned that imagecopyresampled will give black as background color in previous post was wrong. I've just played around with this function. It worked as it should to be. This and other functions combination yield a picture with transparency and it's PNG type !!!

Code: Select all

$filename = imagecreatefrompng('apple.png');
imagesavealpha($filename, true);

$imgInfo[0] = 300;
$imgInfo[1] = 300;

 $nWidth = 150;
 $nHeight = 150;
 $newImg = imagecreatetruecolor($nWidth, $nHeight);
 imagealphablending($newImg, false);
 imagesavealpha($newImg,true);

 $transparent = imagecolorallocatealpha($newImg, 255, 255, 255, 127);
 imagefilledrectangle($newImg, 0, 0, $nWidth, $nHeight, $transparent);
 imagecopyresampled($newImg, $filename, 0, 0, 0, 0, $nWidth, $nHeight, $imgInfo[0], $imgInfo[1]);

header("Content-type: image/png");
imagepng($newImg);
imagedestroy($newImg);
So what's the problem exactly? Is it in Opencart? Could someone trace the problem please?

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by Qphoria » Sun Dec 20, 2009 3:07 am

wedhaaf wrote: Could someone trace the problem please?
Isn't that what we are doing?

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by wedhaaf » Sun Dec 20, 2009 3:21 am

:) If it's not your joke Q, I would be stressed out ...

From the sample code I posted, it is clearly that it will do the job. But why, when it's implemented to Opencart, its result is so differently.
wedhaaf wrote: Could someone trace the problem please?
I mean that someone who knows php coding to trace where the problem starts :-\

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by Qphoria » Sun Dec 20, 2009 3:26 am

LOL.. ermm? don't i know php coding? I wasn't joking. I have been detailing all along that I am running it through the php debugger and trying different things. I AM tracing it when I find time.

Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by wedhaaf » Sun Dec 20, 2009 3:38 am

Sorry, I didn't mean to say that you don't know php :) . I just ask everyone who knows php to trace the problem.

OK, I'll be patient and waiting for your solution. I hope that it'll be on your to do list ;D
Meanwhile I'll try to do "trial and error things" again :(

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by dostoic » Wed Feb 10, 2010 10:55 pm

Hy guys, after reading your posts I succesfully managed to use transparent png images with OpenCart.
Here is code for system/helper/image.php

Code: Select all

<?php
function image_resize($filename, $width, $height) {
	if (!file_exists(DIR_IMAGE . $filename) && is_file(DIR_IMAGE . $filename)) {
		return;
	} 
	
	$old_image = $filename;
	//$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.jpg';
	$new_image = 'cache/' . substr($filename, 0, strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . get_file_extension($filename);
	
	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);
			}		
		}

    smart_resize_image(DIR_IMAGE . $old_image,$width,$height,true, DIR_IMAGE . $new_image,false, false );
                              		
		//$image = new Image(DIR_IMAGE . $old_image);
		//$image->resize($width, $height);
		//$image->save(DIR_IMAGE . $new_image);

	}

	if (isset($_SERVER['HTTPS']) && (($_SERVER['HTTPS'] == 'on') || ($_SERVER['HTTPS'] == '1'))) {
		return HTTPS_IMAGE . $new_image;
	} else {
		return HTTP_IMAGE . $new_image;
	}	
}
function get_file_extension($filename) {
    $path_info = pathinfo($filename);
    return $path_info['extension'];
}


  function smart_resize_image($file,
                              $width = 0,
                              $height = 0,
                              $proportional = false,
                              $output = 'file',
                              $delete_original = true,
                              $use_linux_commands = false ) {
      
    if ( $height <= 0 && $width <= 0 ) return false;
 
    # Setting defaults and meta
    $info = getimagesize($file);
    $image = '';
    $final_width = 0;
    $final_height = 0;
    list($width_old, $height_old) = $info;
 
    # Calculating proportionality
    if ($proportional) {
      if ($width == 0) $factor = $height/$height_old;
      elseif ($height == 0) $factor = $width/$width_old;
      else $factor = min( $width / $width_old, $height / $height_old );
 
      $final_width = round( $width_old * $factor );
      $final_height = round( $height_old * $factor );
    }
    else {
      $final_width = ( $width <= 0 ) ? $width_old : $width;
      $final_height = ( $height <= 0 ) ? $height_old : $height;
    }
 
    # Loading image to memory according to type
    switch ( $info[2] ) {
      case IMAGETYPE_GIF: $image = imagecreatefromgif($file); break;
      case IMAGETYPE_JPEG: $image = imagecreatefromjpeg($file); break;
      case IMAGETYPE_PNG: $image = imagecreatefrompng($file); break;
      default: return false;
    }
    
    
    # This is the resizing/resampling/transparency-preserving magic
    $image_resized = imagecreatetruecolor( $final_width, $final_height );
    if ( ($info[2] == IMAGETYPE_GIF) || ($info[2] == IMAGETYPE_PNG) ) {
      $transparency = imagecolortransparent($image);
 
      if ($transparency >= 0) {
        $transparent_color = imagecolorsforindex($image, $trnprt_indx);
        $transparency = imagecolorallocate($image_resized, $trnprt_color['red'], $trnprt_color['green'], $trnprt_color['blue']);
        imagefill($image_resized, 0, 0, $transparency);
        imagecolortransparent($image_resized, $transparency);
      }
      elseif ($info[2] == IMAGETYPE_PNG) {
        imagealphablending($image_resized, false);
        $color = imagecolorallocatealpha($image_resized, 0, 0, 0, 127);
        imagefill($image_resized, 0, 0, $color);
        imagesavealpha($image_resized, true);
      }
    }
    imagecopyresampled($image_resized, $image, 0, 0, 0, 0, $final_width, $final_height, $width_old, $height_old);
    
    # Taking care of original, if needed
    if ( $delete_original ) {
      if ( $use_linux_commands ) exec('rm '.$file);
      else @unlink($file);
    }
 
    # Preparing a method of providing result
    switch ( strtolower($output) ) {
      case 'browser':
        $mime = image_type_to_mime_type($info[2]);
        header("Content-type: $mime");
        $output = NULL;
      break;
      case 'file':
        $output = $file;
      break;
      case 'return':
        return $image_resized;
      break;
      default:
      break;
    }
    
    # Writing image according to type to the output destination
    switch ( $info[2] ) {
      case IMAGETYPE_GIF: imagegif($image_resized, $output); break;
      case IMAGETYPE_JPEG: imagejpeg($image_resized, $output); break;
      case IMAGETYPE_PNG: imagepng($image_resized, $output); break;
      default: return false;
    }
 
    return true;
  }

?>
Last edited by Qphoria on Wed Feb 10, 2010 11:40 pm, edited 1 time in total.
Reason: Added [code] tags. All forums have them. Lets learn to use them.

Newbie

Posts

Joined
Tue Jan 19, 2010 11:09 pm

Post by wedhaaf » Thu Feb 11, 2010 10:08 am

This is what I need. Q, I hope this will be included to next version.

By the way, there's something's wrong. when main page was loaded, it shows a warning. But sorry, :( I can't grab the warning. It said that some variable aren't defined yet i.e $trnprt_indx, $trnprt_color.

I ignored this warning, and continued to see what happen to image. The script doing great job, images are all in png.

Thank you very much dostoic.

New member

Posts

Joined
Mon Oct 27, 2008 3:10 pm

Post by poetra » Sun Mar 14, 2010 2:17 am

Hi guys, I've tried Dostoic's solution, and I manage to use transparent image in my localserver. But after I upload the whole site and do the "magic trick", the site now says:
"Content Encoding Error
The page you are trying to view cannot be shown because it uses an invalid or unsupported form of compression.
* Please contact the website owners to inform them of this problem."

Enlight me please. Kinda desperate with this transparent thingies, and I really-really need to use some :)

Again, thanks in advance, everybody... :)

User avatar
Newbie

Posts

Joined
Thu Mar 11, 2010 5:03 am
Location - Medan, Indonesia

Post by rph » Sun Mar 14, 2010 5:36 am

Try setting

System->Settings->Server->Output Compression Level

to 0.

-Ryan


rph
Expert Member

Posts

Joined
Fri Jan 08, 2010 5:05 am
Location - Lincoln, Nebraska
Who is online

Users browsing this forum: Bing [Bot], edkny, Google [Bot] and 125 guests