2013-04-08 68 views
9

我想开发扩展Magento的,这有助于创建定制T恤,但我不知道该怎么办它。我想这样的网站http://www.inkpixi.com/item/ATV+Repair/A252/329/item.html如何使用jQuery将文本转换为图像?

在这里你输入的名称,然后自动命名提供功能插入图像。我想正是提供此却没有得到正确的事

+0

这是通过服务器端的图像处理完成的,而不是jQuery – Bill 2013-04-08 09:31:19

+0

上面(在图像顶部)不会定位是否足够?至少对于初学者来说... – Tapirboy 2013-04-08 09:34:11

+0

我不清楚服务器端图像处理你是什么意思, – nehra 2013-04-08 11:47:07

回答

11

你可以简单地做,所以

                          LIVE EXAMPLE

How to place Text on Image to canvas

var CVS = document.createElement('canvas'), 
    ctx = CVS.getContext('2d'); 

CVS.width = 500; 
CVS.height = 500; 
document.body.appendChild(CVS); // Add canvas to DOM 

// GRAPHICS TO CANVAS ///// 
function sendToCanvas(ob){ 
    var img = new Image(); 
    img.onload = function(){ 
    ctx.drawImage(img, 0, 0); 
    ctx.font = ob.fontWeight+' '+ob.fontSize+' '+ob.fontFamily; 
    ctx.textAlign = 'center'; 
    ctx.fillStyle = ob.color; 
    ctx.fillText(ob.text, CVS.width/2, CVS.height/2.5); 
    }; 
    img.src = ob.image; 
} 
/////////////////////////// 

// DO IT! ///////////////// 
sendToCanvas({ 
    image  : "tshirts/white.jpg", 
    text  : "stackoverflow", 
    fontFamily : "Arial", 
    fontWeight : "bold", 
    fontSize : "30px", 
    color  : "rgba(0, 0, 0, 0.7)" 
}); 

右击另存为:)

+0

这是不同于我想要的,我想完全相同的功能,在给定的网站 – nehra 2013-04-09 05:23:24

+0

提供我想添加背景大小和背景位置的图像,因为它在画布内裁剪。我在sendToCanvas数组中添加了样式,但它不起作用。请帮忙! – 2015-04-02 07:32:49

+0

@Nishan帮你做什么? – 2015-04-02 19:37:43