2013-04-08 10 views
9

Ben özel tişört oluşturmak için yardımcı magento uzantısını geliştirmek isteyen ama it.I burada http://www.inkpixi.com/item/ATV+Repair/A252/329/item.htmlJQuery kullanarak metin resme nasıl dönüştürülür?

ismini girin ve ardından otomatik olarak adlandırmak bu site gibi işlevsellik sağlamak istiyorum nasıl bilmiyorum tam da bu sağlamak istiyoruz .ı görüntüye eklemek ama doğru olsun alamadım

sadece bu kadar yapabilir
+0

Bu, jQuery – Bill

+0

değil, sunucu tarafındaki görüntü işleme ile yapılır. Yukarıdaki konumunu alamayın (üstte) görüntü yeterli mi? En azından yeni başlayanlar için ... – Tapirboy

+0

Sunucu tarafı görüntü işleme hakkında ne anlama geldiğimi anlamadım, – nehra

cevap

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

sağ tıklayıp:) olarak Kaydet!

+0

bu ne istediğimden farklı, tam olarak aynı sitede istediğim işlevsellik istiyorum istiyorum – nehra

+0

tuvalin içine kırpılmış olduğundan, görüntüye arka plan boyutu ve arka plan konumu ekleyin. SendToCanvas dizisine stilleri ekledim ama işe yaramıyor. lütfen yardım et! –

+0

@Nishan tam olarak ne yapmanıza yardımcı olur? –