快速生成图像答案

【问题标题】：Generating Images really fast快速生成图像
【发布时间】：2012-05-09 11:14:06
【问题描述】：

我正在创建一个应用程序，让您可以在网络上预览字体，就像myfonts 一样。有人知道他们是怎么做到这么快的吗？

我的方法是使用 HTML5 Canvas 和一些 Javascript 生成字体预览。这是在服务器端使用 PHP GD 库或 Imageick 生成图像的替代方法。

然而，尽管使用 HTML5 画布可以使事情变得快速，并且所有处理都在客户端。我无法隐藏我加载的字体，因为我必须使用 font-face 来加载字体：

    @font-face {
        font-family: 'Press Start 2P';
        src: url('fonts/PressStart2P.ttf');
    }

并使用JS渲染到画布上：

        $('#draw').click(function () {
            var canvas = $('canvas')[0],
            ctx = canvas.getContext('2d');
            ctx.font = '12px "Press Start 2P"';
            ctx.fillStyle = '#000';
            ctx.fillText('Hello, world!', x, y += 20);
            ctx.fillRect(x - 20, y - 10, 10, 10);
        });

关于如何将字体路径保密或任何其他快速生成图像的替代方法的任何想法。我需要非常频繁地在每个页面上生成大约 40 多个图像。

【问题讨论】：

我想他们可能会缓存渲染的字体服务器端，因此不必在每个视图上都生成它们。至于在网络上保密，你不能。 HTML 和 HTTP 被构建为开放标准。如果您可以访问资源以查看它，您可以获得有关该资源存储位置的详细信息。
你说得对，我以为我可以使用 AJAX 加载字体，但这很容易被嗅出。
myfons 在服务器端进行渲染。他们从页面发送带有文本和字体信息的 ajax 调用，并返回一个带有要显示的图像的 json 对象。
@Abs 您最终选择了哪种技术来在服务器上快速生成图像？

标签： php javascript html canvas

【解决方案1】：

我认为它们的生成速度并不快。文本是静态的，用户无法更改，因此他们可以预先生成所有图像。

如果您需要动态文本，确实可以选择在客户端或服务器端呈现。

如果你想对用户“隐藏”字体，唯一的方法是服务器端渲染。确实没有办法允许浏览器使用字体，但不允许用户将其保存到他们喜欢的任何地方。他们可以只使用 Chrome Inspector 或 Firebug 来访问您网页下载的任何资源，无论您如何混淆 URL。

【讨论】：

我害怕那个。客户端渲染有很多好处，但我不希望每个人都可以访问字体。顺便说一句，myfonts 确实允许您更改文本、颜色和背景/前景和大小。不是一个很好的界面，但它的工作原理！
好吧，如果您想跳过很多环节，您可以将每个字形预渲染为单独的图像，然后在客户端将它们组合起来。但我怀疑它会比服务器端渲染更快，而且很难正确调整字距。
是的，我认为我应该坚持在服务器端生成并尝试提出任何可以提高速度的优化。