Magento 1.9 – Image Resize Adds Black Bars Instead of Transparent

magento-1.9PHPproduct-images

I'm trying to resize my product images so they all fit in a 1:1 square. To prevent cutting off the edges I want to add whitespace, but it adds black bars instead of transparent ones. My code:

$image->quality(90);
$image->keepAspectRatio(true);
$image->keepFrame(true);
$image->keepTransparency(true);

if($height == $width) {
    $image->resize(1000, 1000);
}

$image->save($cachedImagePath);

However, it turns out like this:

Any ideas on how to change the black bars to white? I'm running 1.9.0.1 with the latest patches installed (up to 9767). Thanks in advance!

Best Answer

$image->constrainOnly(false);
$image->keepFrame(true);
// avoid black borders by setting background colour
$image->backgroundColor(array(255,255,255));
$image->keepAspectRatio(true);
$image->resize(1000, 1000);

Hope it will help... use backgroundColor to remove black color

Related Solutions

Magento 1.9 – Resize Image Using getMediaUrl

Try this:

<?php $_item = $this->getItem() ?>
<?php 
$_product = Mage::getModel('catalog/product')
                ->setStoreId($_item->getOrder()->getStoreId())
                ->load($_item->getProductId());
?> 
<?php $_order = $this->getItem()->getOrder() ?>
<tr>
    <td align="left" valign="top" style="font-size:11px; padding:3px 9px; border-bottom:1px dotted #CCCCCC;">
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(150,150); ?>" 
 alt="<?php echo $_item->getName() ?>" />
    </td>
 </tr>

<?php $_item = $this->getItem() ?>
<?php $_product = $_item->getProduct();?> 
<?php $_order = $this->getItem()->getOrder() ?>
<tr>
    <td align="left" valign="top" style="font-size:11px; padding:3px 9px; border-bottom:1px dotted #CCCCCC;">
        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail')->resize(150,150); ?>" 
 alt="<?php echo $_item->getName() ?>" />
    </td>
 </tr>

Magento 1.9 – Watermark Gets Black Background When Transparent

I had the same issue after patching 1.9.2.2 and 1.9.2.3. SUPEE-9767 adds an extended validate method in

app/code/core/Mage/Core/Model/File/Validator/Image.php

Mine was:

public function validate($filePath)
{
    $fileInfo = getimagesize($filePath);
    if (is_array($fileInfo) and isset($fileInfo[2])) {
        if ($this->isImageType($fileInfo[2])) {
            return null;
        }
    }
    throw Mage::exception('Mage_Core', Mage::helper('core')->__('Invalid MIME type.'));
}

And changed to:

public function validate($filePath)
{
    list($imageWidth, $imageHeight, $fileType) = getimagesize($filePath);
    if ($fileType) {
        if ($this->isImageType($fileType)) {
            //replace tmp image with re-sampled copy to exclude images with malicious data
            $image = imagecreatefromstring(file_get_contents($filePath));
            if ($image !== false) {
                $img = imagecreatetruecolor($imageWidth, $imageHeight);
                imagecopyresampled($img, $image, 0, 0, 0, 0, $imageWidth, $imageHeight, $imageWidth, $imageHeight);
                switch ($fileType) {
                    case IMAGETYPE_GIF:
                        imagegif($img, $filePath);
                        break;
                    case IMAGETYPE_JPEG:
                        imagejpeg($img, $filePath, 100);
                        break;
                    case IMAGETYPE_PNG:
                        imagepng($img, $filePath);
                        break;
                    default:
                        return;
                }
                imagedestroy($img);
                imagedestroy($image);
                return null;
            } else {
                throw Mage::exception('Mage_Core', Mage::helper('core')->__('Invalid image.'));
            }
        }
    }
    throw Mage::exception('Mage_Core', Mage::helper('core')->__('Invalid MIME type.'));
}

The problem seems to be the imagecopyresampled call without setting transparency first as it merges the default black background from imagecreatetruecolor.

What I did was move imagecopyresampled into the switch statement and add the transparency calls before imagecopysampled in the png case (you could also use it for gif).

So now my if/switch looks like this:

if ($image !== false) {
    $img = imagecreatetruecolor($imageWidth, $imageHeight);

    switch ($fileType) {
        case IMAGETYPE_GIF:
            imagecopyresampled($img, $image, 0, 0, 0, 0, $imageWidth, $imageHeight, $imageWidth, $imageHeight);
            imagegif($img, $filePath);
            break;
        case IMAGETYPE_JPEG:
            imagecopyresampled($img, $image, 0, 0, 0, 0, $imageWidth, $imageHeight, $imageWidth, $imageHeight);
            imagejpeg($img, $filePath, 100);
            break;
        case IMAGETYPE_PNG:
            imagecolortransparent($img, imagecolorallocatealpha($img, 0, 0, 0, 127));
            imagealphablending($img, false);
            imagesavealpha($img, true);
            imagecopyresampled($img, $image, 0, 0, 0, 0, $imageWidth, $imageHeight, $imageWidth, $imageHeight);
            imagepng($img, $filePath);
            break;
        default:
            return;
    }
    imagedestroy($img);
    imagedestroy($image);
    return null;
}

This kept my png transparency during product image uploads. Dont know if this will help with the watermark and obviously if you do use this copy the file into your local folder.

app/code/local/Mage/Core/Model/File/Validator/Image.php

Best Answer

Related Solutions

Magento 1.9 – Resize Image Using getMediaUrl

Magento 1.9 – Watermark Gets Black Background When Transparent

Related Topic