代码之家 › 专栏 › 技术社区 › Javier Parra

gd2、ttf和php的字母放置错误

gd2 php

1

Javier Parra · 技术社区 · 16 年前

前一段时间,我做了一个脚本,它获取一些文本并将其作为图像返回,工作得非常完美。但我不确定从什么时候开始出现奇怪的虫子。左边有字母“glyph”的字母(我向字体极客道歉)会被推到右边,所以字母从它开始,但只给主字母留出空间,呵呵,我想应该举个例子。

alt text http://www.esbasura.com/images/bad.png

预期结果是: alt text http://www.esbasura.com/images/good.png

很明显,这个“坏”是由我的脚本生成的,位于这里: http://www.esbasura.com/images/text.php?txt=The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog.&fnt=1&size=23&bg=lightgrey 好的是达芬特在这里创造的: http://img.dafont.com/preview.php?text=The%20quick%20brown%20fox%20jumps%20over%20the%20lazy%20dog.&ttf=bleeding_cowboys0&ext=1&size=23&psize=m&y=46

我在剧本里没有做什么花哨的事,以下是相关部分:

                imagefilledrectangle($im, 0, 0, $width, $height, $$bg);
                imagettftext($im, $size, 0, (-1*$textsize[6]), (-1*$textsize[7]), $$color, $font, $text);
//              imagefttext($im, $size, 0, (-1*$textsize[6]), (-1*$textsize[7]), $$color, $font, $text); same results using imagefttext
                imagecolortransparent($im, $$bg);
                header("Cache-Control: public"); // HTTP/1.1
                header("Content-type: image/png");
                imagepng($im);
                imagedestroy($im);
    }

我有点惊讶,因为,正如我所说,它曾经工作得完美无瑕。也许我的主人换了我的机器。

(这是我的phpinfo: http://www.work4bandwidth.com/info.php ) 相关位:

gd
GD Support  enabled
GD Version  bundled (2.0.34 compatible)
FreeType Support    enabled
FreeType Linkage    with freetype
FreeType Version    2.2.1
GIF Read Support    enabled
GIF Create Support  enabled
JPG Support     enabled
PNG Support     enabled
WBMP Support    enabled
XBM Support     enabled

编辑: 还请注意,图像大小的计算显然是在考虑字体的正确呈现的情况下完成的,我使用:

                $textsize = imagettfbbox($size, 0, $font, $text);

                $width = ($textsize[2] - $textsize[0]);
                $height = ($textsize[3] - $textsize[5]);

3 回复 | 直到 16 年前

1

3

BMBM 16 年前

不幸的是,在使用php&gdlib生成标题图形时,我还必须处理一些问题。在我的大部分项目中,我使用typo3作为cms。它可以创建图形头并利用gdlib。我不得不与质量问题作斗争:在我的本地开发机器(OSX)上,字体呈现出极好的质量,在生产服务器(Gentoo)上,字体变得模糊和“薄”。我不知道这些差异是因为不同的平台还是因为php/gdlib版本 轻微地 不同。我也遇到了像您这样的问题,特别是当web主机升级到新的php版本时。昨天的头条看起来不错,更新后,字符放错了地方,元音变音符不见了等等。

一 服务器端备选方案 可能是ImageMagick。这个小的php片段创建了一个示例图像(假设 Bleeding_Cowboys.ttf 与脚本位于同一目录中):

<?php
$currentDir = dirname(__FILE__);
$fontPathname = $currentDir . '/Bleeding_Cowboys.ttf';

$cmd = '  convert -background white -fill black -font "' . $fontPathname . '" -pointsize 23 label:"The quick brown fox jumps over the lazy dog" ' . $currentDir . '/headline.png';
exec($cmd);

print '<img src="headline.png" alt="" border="0" />';

图像如下:

alt text http://i45.tinypic.com/nckym0.png

您可能需要使用 -pointsize 23 争论。

我在Windows上使用了此IM版本:

ImageMagick 6.5.4-6 2009-07-25 Q16 OpenMP

在此处阅读有关ImageMagicks文本处理功能的更多信息: http://www.imagemagick.org/Usage/text/

虽然imagemagick现在是一个非常常见的软件包,但是仍然有一些主机没有安装im。但你可以下载一个静态编译的IM版本,你只需通过FTP上传到某个目录,使二进制文件可写,然后你可以用它来生成你的图像。我找到了一个关于如何做到这一点的教程,不幸的是只有德语版本,但我相信您可以从提供的shell命令中领会基本思想: http://www.website4all.de/support/support-typo3/imagemagick.html

虽然imagemagick是一个可行的选择,但我最终使用了 客户端 使用javascript创建嵌入字体的图形标题。

首先,我偶然发现 SIFR ( http://wiki.novemberborn.net/sifr/ )它用flash对象替换html内容以呈现字体。虽然一开始看起来很有前途,但我把它扔了,因为:

如果有很多元素要替换,网站会变得很慢
设置有点麻烦
它依赖于flash,头条新闻在iphone或ipad上不起作用。

我本可以为您创建一个示例,但我的笔记本电脑上没有安装adobe flash cs。

总之,我终于找到了一个很好的客户端javascript库,它实现了我想要的: 夸丰 ( http://cufon.shoqolate.com/generate/ )将ttf文件上载到该服务,然后使用创建的javascript文件和cufon基本库,以便用图形标题替换标题元素。cufon使用canvas元素来实现这一点。阅读更多关于它是如何完成的 http://wiki.github.com/sorccu/cufon/about

我真正喜欢的是Cufon:

适用于所有主流浏览器,包括IE 6(及更高版本)
适用于iphone和ipad
非常快,即使有很多头条新闻
设置非常简单

我对cufon唯一真正关心的是:许可。这可能是一个问题,尤其是商业字体。并非所有字体创建者都允许这种嵌入。如果有疑问,一定要得到书面许可。

但是无论如何,使用cufon的简单html站点可能如下所示:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test</title>
        <script type="text/javascript" src="cufon.js"></script>
        <script type="text/javascript" src="Bleeding_Cowboys_400.font.js"></script>
        <script type="text/javascript">
          Cufon.replace('p', {fontFamily: 'Bleeding Cowboys'});
        </script>
        <style type="text/css">
        p {
            color:#000;
            font-size:23px;
        }
        </style>
    </head>
    <body>
       <p>The quick brown fox jumps over the lazy dog</p>
    </body>
</html>

生成的标题图像如下所示:

alt text http://i45.tinypic.com/pon5g.png

正如您在html站点的源代码中看到的,您可以通过css定义字体大小(可能也需要调整)和颜色。然后你打电话 Cufon.replace('p', {fontFamily: 'Bleeding Cowboys'}); 为了告诉cufon更换什么(在这种情况下 p 元素)使用什么字体系列(在本例中, Bleeding Cowboys )

我知道,这些并不能直接回答您的问题,但是客户端标题的创建给了我非常好的结果,它使设置和代码变得更加容易,然后使用我尝试过的所有服务器端解决方案。如果我是你,我会给sifr或cufon一个机会,虽然我可能值得一试事先,特别是如果你被限制在服务器端解决方案。

2

1

Larry K 16 年前

可能gd库改变了,这就是问题的根源。它也可以是字体文件,但这种可能性较小。

你知道多久以前它还在工作吗?

是在php 4.3之前吗?当时gd库被捆绑到php中。

如果在4.3之前,请尝试独立gd库的不同版本。见 http://www.libgd.org

如果它在php 4.3之后工作,那么只需尝试不同版本的php就可以找到它停止工作的地方。

解决方案:检查gd库版本并构建一个使用旧gd库(独立或捆绑)的php版本。

您也可以与您的ISP讨论,他们可能有一个记录,当他们更新了不同版本的PHP。

最终,你会发现到底是哪个版本的gd库破坏了你的软件。然后你需要提交一个bug报告,希望它能被修复。

或者可以创建一个小服务器,它只使用旧版本的php来提供动态创建的png。

3

1

Alix Axel 16 年前

imagettfbbox() 是马车和它 可能是 问题的原因,请尝试使用 imagettfbbox_t() 功能可在 http://ruquay.com/sandbox/imagettf/ ,也许这能解决问题。

另外,您确定TTF字体完全相同吗?因为你的版本有点 胆大的人 比原来的。