Создайте изображение с существующим фоновым изображением и текстом в javascript, чтобы сохранить его как jpg в php

У меня есть несколько фан-страниц на Facebook, на которых я публикую изображения с забавным текстом (как в примере ниже). На всех страницах я использую один и тот же текст, но с разными фоновыми изображениями. Размеры фона всегда одинаковы. Меняется только цвет. Поскольку мне нужно сохранять каждое изображение с другим фоном по отдельности, я сейчас пытаюсь создать небольшой скрипт, который позволяет мне хранить созданный текст с разным фоном в виде файла jpg или png. Вот как я представляю процесс:

  1. Я бы добавил текст в текстовую область, которая была бы частью обычной html-формы.

  2. С помощью javascript я хотел бы поместить текст (размер шрифта, ширину и высоту) в белую рамку образца ниже.

  3. Когда форма отправляется, скрипт должен пройти через цикл и сохранить текст на каждом другом фоне в отдельной папке.

Вот пример того, как должен выглядеть вывод

введите здесь описание изображения

Есть части моего плана, которые я знаю, как понять. Но есть две вещи, с которыми я застрял.

  1. Как я могу настроить текст так, чтобы он помещался в белую рамку образца изображения?

  2. Как я могу создать изображение из фонового изображения и некоторого текста поверх него.

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


javascript php html jquery php-gd
person Dennis    schedule 08.04.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не уверен, что в PHP есть способ создать такое изображение. Вы пометили его Javascript, поэтому я предполагаю, что у вас есть внешний интерфейс.

Я собирался предложить что-то вроде FitText.js, но для того, чтобы сохранить свою работу в виде файла изображения, вам нужно необходимо использовать Canvas API. Он имеет метод toDataUrl('image/jpeg').

Вы можете использовать canvasCtx.drawImage для создания фона изображения. canvasCtx.strokeRect для создания прямоугольника с рамкой. . И canvasCtx.fillText для рисования текста.

Подогнать текст под размер контейнера

В холсте есть метод измерения того, сколько места займет текст при текущем размере шрифта. Однако это не будет переносить текст, когда есть свободное пространство по вертикали, вместо этого он будет помещаться в одну строку. Лучшим решением было бы иметь фиксированный размер шрифта и несколько строк в <textarea> или нескольких <input>, что позволит вам подогнать текст, как описано в следующем потоке переполнения стека:

Размер по размеру шрифта на холсте

Сохранить изображение в файл

Ознакомьтесь с этой темой: Сохранить холст как jpg на рабочем столе

Честно говоря, после всего этого я бы сказал, что было бы проще настроить автоматизацию в любом фоторедакторе, которым вы пользуетесь. Например, шаблон PSD в Photoshop.

person Dan Bovey    schedule 09.04.2017