Discussion :

[pito2901]

Bonjour,

Je n'ai pas de résultats ou solutions précis concernant mon problème :

Je souhaite faire un rendu d'un texte sur une image ou encore logo, plus précisément écrire un texte brut de fond dans un bloc puis faire un rendu instantané sur l'image avec une couleur et une taille prédéfinies dans un autre bloc.

Pouvez-vous me donner des pistes ou un début de code ? (Je pense avoir choisi la bonne section sur le forum pour en parler, le JS est sûrement requis pour ce genre de projet)

Et tant que j'y suis, est-il possible de proposer un téléchargement de ce "logo" en jpg par exemple...

Merci de votre lecture.

PITO2901

[pito2901]

Bon en fouinant pas mal sur le net, je me retrouve avec ça (qui utilise du JQuery) mais mon souci est que lorsque je fais un retour à la ligne il m'affiche

<div><br></div>

Comment peut-on l'enlever ?

Code JQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(function() {
  $("#input").keyup(function() {
  var content = $('#input').html();
  $("#output").text(content);
  });
});

http://codepen.io/anon/pen/Brozf

Merci.

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$(function() {
  $("#input").keyup(function() {
  var content = $('#input').text();
  $("#output").html(content);
  });
});

[pito2901]

Merci !

Mais du coup comment gérer les retours à la ligne ?

[SpaceFrog]

en tapant <br/>

[pito2901]

OK mais on ne peut pas gérer ça en jquery ? Ou JS ?

[SpaceFrog]

si avec un replace
http://jsfiddle.net/2c9x8uL7/

[pito2901]

Merci beaucoup !

[pito2901]

Re,

En restant sur le même sujet, est-il possible de rendre un téléchargement de ce texte converti en image ?

[SpaceFrog]

avec une balise canvas mais pas de façon crossbrowser

ou alors en passant par le serveur, par exemple en php avec GDLib pour la génération de l'image

[pito2901]

Merci mais cela donnerait quoi sur le code tel quel ?

[pito2901]

J'ai beau chercher, je ne trouve absolument rien !

Je n'arrive même pas à trouver le strict minimum pour télécharger le 'rendu' en js ou jquery...

Peux-tu me donner plus de pistes ou un bout de code que je puisse adapter ?

Merci.

[SpaceFrog]

http://www.html5canvastutorials.com/...g-as-an-image/
http://weworkweplay.com/play/saving-...nvas-as-image/

[pito2901]

Bon merci, mais j'ai testé les codes et n'arrive à rien, pouvez-vous me l'adapter sur le code ? C'est quand même pas grand chose...

Merci d'avance.

[pito2901]

Bah en cherchant beaucoup plus, j'obtiens ce code : http://codepen.io/anon/pen/KwKeoe

mais le rendu n'est pas parfait, il tasse le contenu, et ne fait plus de retour à la ligne quand on clique sur convertir...

De plus je n'arrive pas à trouver de fonction pour télécharger le canvas...