跨境电商
经验交流分享

Magento水印锯齿BUG涉及代码及修复

Magento的水印功能做的还算不错,可以根据image、small image和thumbnail分别设置不同的水印。之前一直没有过多关注Magento水印的具体实现过程,因为几乎没有客户反映到水印出现问题。

不过再完美的东西,都会有些瑕疵,Magento也不例外。在最近的一个项目中,客户提到Magento的水印功能有些问题,在添加了水印之后,会在该水印周围生成不规则的锯齿。如下图所示。可以看到在Preview这个水印的周围灰色之外,还有一层不规则的锯齿。这里演示的可能还不算糟糕,根据不同的原始图片的颜色组成,该锯齿可能比这里演示的更难看。

magento水印锯齿bug

magento水印锯齿bug

如果要求不是太高,不通过代码解决该问题非常简单,只是水印的实现方式不同。例如下面这个图片。在制作水印的时候,可以给水印添加一个横向的白色背景,这样生成的水印锯齿就不会明显看出来了。

magento水印锯齿bug简单修复

magento水印锯齿bug简单修复

那么如果想实现原始的水印效果,该如何解决呢?毕竟像FocalPrice、LightIntheBox和DX这些业界大佬用的都是第一种形式的产品水印。如下所示。

focalprice水印

focalprice水印

lightinthebox水印

lightinthebox水印

在花了些时间研究Magento产品水印生成的代码之后,终于找到了原因所在。Magento通过GD2库生成图片,类就体现在Varien图片适配器Varien_Image_Adapter_Gd2。下面这段代码取自该类,是水印锯齿问题所在之一。

Magento在将水印贴到产品图片之前,会有一个水印重新生成的过程,如下所示,Magento会首先建立一个和水印大小一致的图片$newWatermark对象,然后再通过imagecopyresampled()方法,将两者结合。该过程直接导致了锯齿问题的生成。

[php]
if ($this->getWatermarkWidth() &&
$this->getWatermarkHeigth() &&
($this->getWatermarkPosition() != self::POSITION_STRETCH)
) {
$newWatermark = imagecreatetruecolor($this->getWatermarkWidth(), $this->getWatermarkHeigth());
imagealphablending($newWatermark, false);
$col = imagecolorallocate($newWatermark, 250, 250, 250);
imagecolortransparent($newWatermark, $col);
imagefilledrectangle($newWatermark, 0, 0, $this->getWatermarkWidth(), $this->getWatermarkHeigth(), $col);
imagealphablending($newWatermark, true);
imageSaveAlpha($newWatermark, true);
imagecopyresampled(
$newWatermark,
$watermark,
0, 0, 0, 0,
$this->getWatermarkWidth(), $this->getWatermarkHeigth(),
imagesx($watermark), imagesy($watermark)
);
$watermark = $newWatermark;
}
[/php]

最终,通过添加了一些新的方法与生成机制。成功消除了锯齿问题。该过程中,还涉及到水印的透明度问题。整个过程还是有些通过,不过对于GD2有了一个重新的认识,还算有些欣慰。

magento水印完美修复

magento水印完美修复

赞(0)
未经允许不得转载:锐想 » Magento水印锯齿BUG涉及代码及修复
分享到: 更多 (0)

评论 3

评论前必须登录!

 

  1. #1

    老大你的是怎么修改的,,能否分享一下! 🙂 🙂

    evil angel6年前 (2013-06-28)
  2. #2

    对啊,老大分享一下吧。。

    water6年前 (2013-07-19)

锐想电商 - 跨境电商经验交流分享

锐想无限