2013-04-08 8 views
9

voglio sviluppare un'estensione per Magento che aiutano a creare t-shirt personalizzate, ma non so come fare it.I vogliono fornire funzionalità piace questo sito http://www.inkpixi.com/item/ATV+Repair/A252/329/item.htmlCome convertire il testo in immagine usando jquery?

Qui è possibile inserire il nome e poi automaticamente il nome inserisci per immagine .i voler fornire esattamente questo, ma non ha ottenuto diritto importa

+0

L'operazione viene eseguita con l'elaborazione dell'immagine lato server, non con jQuery – Bill

+0

Non posizionare uno sopra (sopra) l'immagine essere sufficiente? Almeno per i principianti ... – Tapirboy

+0

non sono chiaro sull'elaborazione dell'immagine lato server cosa intendi con questo, – nehra

risposta

11

puoi farlo in modo semplice, con

                          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)" 
}); 

Fare clic destro eSalva come:)!

+0

questo è diverso da quello che voglio, voglio esattamente la stessa funzionalità che ho fornito nel sito specificato – nehra

+0

Voglio aggiungi la dimensione dello sfondo e la posizione dello sfondo all'immagine perché è ritagliata all'interno dell'area di disegno. Ho aggiunto stili nell'array sendToCanvas ma non funziona. per favore aiuto! –

+0

@Nishan ti aiuta con cosa esattamente? –

Problemi correlati