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 +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

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

• javascript
• jquery
• canvas

Share Improve this question Follow edited Apr 21, 2018 at 21:34 Roko C. Buljan 207k4141 gold badges328328 silver badges340340 bronze badges asked Apr 8, 2013 at 9:25 nehranehra 15811 silver badge88 bronze badges 3

• This is done with server-side image processing, not jQuery – Bill Commented Apr 8, 2013 at 9:31
• Would not position a <span> above (on top of) the image be enough? At least for starters... – J.G.Sebring Commented Apr 8, 2013 at 9:34
• i am not clear about server-side image processing what do you mean by that, – nehra Commented Apr 8, 2013 at 11:47

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 13

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./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 :) !}