如何将输入文本插入图像？

Question

I want to develop extension for magento which help to create custom t-shirt but i don't know how to do it.I want to provide functionality like this site http://www.inkpixi.com/item/ATV+Repair/A252/329/item.html ^{Dead link}

here you enter the name and then name automatically insert to image .i want to provide this exactly but didn't get right matter

Answer 1

You can do it so simply with 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://i.imgur.com/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: <input id="text" type="text"><br> 

^{Right click and Save as :) !}