Преобразование текста в изображение с помощью javascript

Есть ли способ преобразовать входной текст в изображение. То, что я точно пытаюсь сделать, это ввести текст в текстовое поле и отобразить его на div. Когда я нажимаю кнопку, текст, скопированный в div, должен быть изменен на изображение. Any1 знаю что-нибудь об этом?? Спасибо заранее!

Ответ 1

Вы можете сделать это с помощью скрытого элемента canvas и преобразовать его в изображение с помощью toDataURL. Ваш код будет выглядеть примерно так:

var tCtx = document.getElementById('textCanvas').getContext('2d'), //Hidden canvas
    imageElem = document.getElementById('image'); //Image element
// Text input element
document.getElementById('textInput').addEventListener('keyup', function (){
    tCtx.canvas.width = tCtx.measureText(this.value).width;
    tCtx.fillText(this.value, 0, 10);
    imageElem.src = tCtx.canvas.toDataURL();
    console.log(imageElem.src);
}, false);

Демо

Ответ 2

Подход к холсту, предложенный Amaan, определенно сегодня подходит для создания изображений на стороне клиента.

В прошлом наиболее распространенным решением было использование библиотеки типа Cufon. На странице Cufon wiki по ее использованию представлен этот фрагмент:

<script type="text/javascript">
    Cufon.replace('h1'); // Works without a selector engine
    Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
</script>

Cufon создает клиентскую версию шрифта вверх. Это означает, что он просто добавляет статические файлы на ваш веб-сервер вместо того, чтобы генерировать изображения на веб-сервере (например, с ImageMagick).

Ответ 3

Вам нужно использовать ImageMagick на вашей стороне сервера. В зависимости от того, какую структуру вы используете, вам, возможно, придется написать несколько хороших сценариев оболочки.

ИЛИ

Вы можете проверить это:

http://www.blitline.com/docs/functions