Question

我正在使用Imagemagick来动态生成OpenGraph图像我正在逐步处理该图像，意思是：

将图像大小调整为1200px宽度
灰度图像
使图片透明
将透明图像与滤镜颜色相乘

创建背景图片后，我开始添加元素。

添加主线
- ＆GT; 8.添加一些其他元素

不幸的是，在生成该图像后，文本周围有一些奇怪的碎片和我覆盖的图像。

任何想法如何避免这种情况？

我附上一些图片来证明问题。

Fragments around text Fragments aroung images

修改
我希望这有帮助

Link to SRC Image

$imagename = uniqid() . ".jpg";
$image = $og_upload_path . '/' . $imagename;

$alpha = 15
$filterColor = "#08e2dd"; // Light Blue

// Asset images for processing the opengraph image
$white_background = $image_path . "/white.png";

$src_image = [Link to src image see above];

// Resize Image to 1200px width
    system("convert '" . $src_image . "' -resize 1200 '" . $image . "'");

    // Grayscale Image
    system("convert '" . $image . "' -colorspace Gray '" . $image . "'");

    // Make image transparent
    system("composite -blend " . $alpha . " '" . $image . "' '" . $white_background . "' '" . $image . "'");

    // Multiply Image with filter color
    system("convert '" . $image . "' \ "
      . " \( -clone 0 -fill '" . $filterColor . "' -colorize 100 \) \ "
      . " -compose multiply \ "
      . " -composite '" . $image . "'"
    );

    // Add MainLine Text
    system("convert '" . $image . "' -size 1000x -background transparent \ "
      . " -fill '" . $textColor_MainLine . "' \ "
      . " -pointsize " . $fontSize_MainLine . " \ "
      . " -font " . $path_fontfile . " \ "
      . " -gravity center caption:" . $text_MainLine . " \ "
      . " -gravity center -composite '" . $image . "'"
    );

Answer 1

JPG是一种有损的图像格式，而ImageMagick的convert实用程序doesn't retain the highest quality by default：

对于JPEG和MPEG图像格式，质量为1（最低图像质量和最高压缩）至100（最佳质量但最低效压缩）。如果可以确定，则默认使用输入图像的估计质量，否则为92.当质量大于90时，色度通道不会被下采样。使用-sampling-factor选项指定色度下采样的因子。

您可以在命令中设置-quality 100，但最好以无损图像格式操作图像，然后转换为有损格式（如JPG）以获得较小的文件大小。

Answer 2

尽可能保持PNG格式，并且只在最后阶段转到JPG。也。尽可能减少对convert的调用，以避免解压缩和重新压缩。因此，您可以按照以下步骤对convert进行前4次调用：

convert https://s3.amazonaws.com/f.cl.ly/items/0E0V2M29313B3b0p1x2W/og_image.png \
   -resize 1200                                                                  \
   -colorspace gray                                                              \
   -evaluate multiply 0.15 -evaluate add 55700                                   \
   \( +clone -fill "#08e2dd" -colorize 100 \) -compose multiply -composite       \
   output.png

我重新命名你的composite命令，将85％的白色乘以0.15并加上65％的65,535（即55700），这是16位量化的白色。这样可以省去你必须保持一个white.png文件的原因（因为我们知道所有像素都是65535）并允许我们使用convert执行所有操作，而不必保存和使用{ {1}}并保存并恢复为composite。

我会让你检查质量和处理时间，然后自己添加最后一步。

Answer 3

感谢所有人的快速回复。

最后，Facebook的压缩确实是问题所在。如果你手动上传它会变得模糊，真的很讨厌，但如果你只是将它用作OpenGraph图像那就太棒了。答案和评论对我帮助很大！

Imagemagick - 图像中文本周围的奇怪片段

3 个答案: