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

我想为magento开发扩展，这有助于创建自定义T恤，但我不知道该怎么做。我想提供像这个网站的functionhttp://www.inkpixi.com/item/ATV+Repair/ A252 / 329 / item.html ^死链接

在这里输入名称，然后名称自动插入图像。我想提供这个，但没有得到正确的事情

Answer 1

你可以用帆布简单地做到这一点

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://sofzh.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: