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

Question

Я искал пару часов и до сих пор не могу найти хороший плагин jquery (или что-нибудь еще), который помог бы мне вставить текст в изображение.

Я не хочу, чтобы текст был над изображением. Я хочу, чтобы текст стал частью изображения. Я буду использовать его для создания мотивационных / демотивационных постеров в Интернете. Помимо проблемы с текстом, я также не могу найти способ сделать черный "отступ".

Я был бы очень признателен, если бы вы дали мне несколько советов или советов о том, как подойти к этому. Спасибо!

Answer 1

JQuery предназначен для обработки пользовательского интерфейса, который обрабатывает вещи на уровне пользовательского интерфейса в браузере. То, что вы хотите, должно быть создано на стороне сервера - с использованием PHPs imagemagick библиотека, например

Answer 2

Взгляните на Raphaël .Возможно, вам потребуется динамически загрузить изображение и создать новое изображение в качестве выходных данных.

В противном случае HTML 5 будет вариантом или потребуется решение на стороне сервера, как упоминалось другими.

Answer 3

Если у вас хорошая поддержка HTML5, это возможно с помощью элемента Canvas.

Вы можете использовать:

ctx.drawImage(img, dx, dy);

для рендеринга содержимого тега <img> на холст с указанным смещением (чтобы дать вам границу) и:

ctx.fillText(...);

чтобы добавить свой собственный текст сверху.

См. W3C spec .

Если у вас нет HTML5, это нужно сделать на стороне сервера.

Answer 4

Вы не сможете редактировать изображение с помощью JavaScript.Возможно, вам придется использовать какой-нибудь серверный язык для редактирования изображений.