jQuery Girl
  1. jQuery Girl
  3. Comment insérer du texte dans l’image?
Intereting Posts
Empêcher plusieurs sélections de même valeur actualiser le contenu d’une zone de liste avec .append () dans Internet Explorer Comment réduire tous les sous-menus à la fermeture du menu accordéon de jQuery Uncaught TypeError: L’object # n’a pas de méthode ‘find’ Google map ne s’affiche pas correctement PhoneGap n’émet pas de demande AJAX (jsonp) Document jQuery prêt et fonction Portée Comment modifier Google Map Center en cliquant sur un bouton déclencheur jQuery cliquez sur Safari mobile (iPad) Morris.JS Hauteur d’étiquette sur l’axe X jquery, envelopper des éléments dans une div L’image générée html2canvas et toDataURL a une ligne horizontale Comment afficher une div cachée en passant la souris sur une série d’images Tri des résultats de l’interface utilisateur à saisie semi-automatique en fonction de l’emplacement du match Convertisseur d’image HTML en pdf en javascript

Comment insérer du texte dans l’image?

Je souhaite développer une extension pour magento qui aide à créer un t-shirt personnalisé, mais je ne sais pas comment le faire. Je souhaite proposer des fonctionnalités telles que celle-ci: http://www.inkpixi.com/item/ATV+Repair/ A252 / 329 / item.html Lien mort

Ici, vous entrez le nom, puis le nom est automatiquement inséré dans l’image .Je souhaite le fournir exactement, mais cela ne va pas.

Vous pouvez le faire si simplement avec de la canvas 

var canvas = document.createElement('canvas'), ctx = canvas.getContext('2d'); canvas.width = 200; canvas.height = 200; document.body.appendChild(canvas); function sendToCanvas( ob ){ var img = new Image(); img.addEventListener('load', function(){ ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.font = ob.fontWeight+' '+ob.fontSize+' '+ob.fontFamily; ctx.textAlign = 'center'; ctx.fillStyle = ob.color; ctx.fillText(ob.text, canvas.width/2, canvas.height/2.5); }); img.src = ob.image; } // Defaults var cvsObj = { text : "stackoverflow", image : "http://soffr.miximages.com/javascript/hqayV16.jpg", fontFamily : "Arial", fontWeight : "bold", fontSize : "90%", color : "rgba(244, 128, 36, 0.7)" }; sendToCanvas( cvsObj ); // Send default data on init document.getElementById("text").addEventListener("input", function(){ cvsObj.text = this.value; // Modify cvsObj text sendToCanvas( cvsObj ); // Send custom data on input }); 
 Text: