Créer une image avec l'image de fond existante et le texte en javascript pour sûr comme jpg en php

Question

Je possède quelques fanpages sur facebook dans lesquels je poste des images contenant du texte drôle (comme l'exemple ci-dessous). Sur toutes les pages, j'utilise le même texte mais avec des images de fond différentes. Les tailles de l'arrière-plan sont toujours les mêmes. Seule la couleur change. Comme je dois enregistrer chaque image avec un arrière-plan différent, j'essaie maintenant de créer un petit script qui me permet de stocker le texte créé avec différents arrière-plans comme un fichier jpg ou png. Voici comment j'imagine le processus:

1. J'ajouter du texte à une zone de texte qui serait une partie d'un formulaire HTML normal. Avec javascript, je voudrais ajuster le texte (en taille, largeur et hauteur) dans la bordure blanche de l'échantillon ci-dessous. Lorsque le formulaire est envoyé, le script doit ensuite exécuter une boucle et enregistrer le texte sur chaque arrière-plan différent dans un dossier séparé.

Voici un exemple de ce que la sortie devrait ressembler à

Il y a des parties de mon plan que je sais comment comprendre. Mais il y a deux choses avec lesquelles je suis coincé.

1. Comment puis-je ajuster le texte afin qu'il tienne dans la bordure blanche de l'image de l'échantillon?

2. Comment puis-je créer une image à partir d'une image d'arrière-plan et du texte sur le dessus.

Est-ce que quelqu'un a une idée sur la façon d'aborder cela? Ou peut-être même un script entièrement fonctionnel que je pourrais utiliser pour cela?

Answer 1

Je ne suis pas sûr qu'il existe un moyen de faire ce genre de génération d'image en PHP. Vous l'avez tagué Javascript, donc je suppose que vous avez un frontal.

J'étais sur le point de suggérer quelque chose comme FitText.js mais pour enregistrer votre travail en tant que fichier image, vous devez utiliser l'API Canvas. Il a une méthode toDataUrl('image/jpeg').

Vous pouvez utiliser canvasCtx.drawImage pour créer l'arrière-plan de l'image. A canvasCtx.strokeRect pour créer un rectangle qui a une bordure. Et canvasCtx.fillText pour dessiner le texte.

texte Ajuster à un conteneur

Il y a une méthode dans la toile pour mesurer la quantité d'espace le texte prendra à sa taille de police actuelle. Cependant, cela n'emballe pas le texte quand il y a de l'espace vertical disponible, en mettant tout sur une ligne à la place.Une meilleure solution serait d'avoir une taille de police fixe et plusieurs lignes dans un <textarea> ou plusieurs <input> s, vous permettant d'adapter le texte tel que discuté dans le fil de débordement de pile suivant:

Size to fit font on a canvas

Enregistrer l'image dans un fichier

Vérifiez ce fil: Save canvas as jpg to desktop

Honnêtement, après tout cela, je dirais que ce serait plus facile de mettre en place un peu d'automatisation dans tout éditeur de photos tu utilises. Par exemple, un modèle PSD dans Photoshop.