如何使用jquery将文本转换为图像？ [英] How to convert text into image using jquery?

问题描述

我想开发magento的扩展，这有助于创建定制的T恤，但我不知道该怎么做。我想提供的功能，像这个网站 http://www.inkpixi.com/item/ATV+Repair/A252/329/item.html

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 sitehttp://www.inkpixi.com/item/ATV+Repair/A252/329/item.html

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

here you enter the name and then name automatically insert to image .i want to provide this exactly but didn't get right matter

推荐答案

您可以使用画布

            LIVE EXAMPLE

             LIVE EXAMPLE

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

^{右键单击 > ：）！}

^{Right click and Save as :) !}

这篇关于如何使用jquery将文本转换为图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！