Создание изображений очень быстро

Question

Я создаю приложение, которое позволяет вам просматривать шрифты в Интернете, точно так же myfonts делает это. Кто-нибудь знает, как они делают это так быстро?

Мой метод - генерировать предварительные просмотры шрифтов, используя Canvas HTML5 и некоторый 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 изображений на каждой странице.

Answer 1

Я не думаю, что они генерируют их очень быстро. Текст является статическим и не может быть изменен пользователем, поэтому они могут просто предвосхищать все изображения.

Если вам нужен ваш текст, чтобы быть динамичным, действительно, у вас есть возможность рендеринга на стороне клиента или на стороне сервера.

Если вы хотите «скрыть» шрифт от пользователя, единственным способом является рендеринг на стороне сервера. В действительности нет возможности разрешить браузеру использовать шрифт, но не позволяет пользователю сохранять его в любом месте. Они могут просто использовать Chrome Inspector или Firebug для доступа к любому ресурсу, загруженному вашей веб-страницей, независимо от того, насколько хорошо вы запутываете URL.