生成图像的速度非常快

Generating Images really fast

本文关键字：非常 速度 图像      更新时间：2023-09-26

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

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

但是，尽管使用 HTML5 画布使事情变得快速，并且所有处理都在客户端进行。我在隐藏加载的字体时遇到问题，因为我必须使用字体来加载字体：

    @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+ 张图像。

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

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

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

相关文章：