如何将输入文本插入图像？ [英] How to insert input text into image?

问题描述

我想为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 site http://www.inkpixi.com/item/ATV+Repair/A252/329/item.html^{Dead link}

在这里输入名称，然后名称自动插入图像.i想要准确地提供这个但是没有得到正确的事情

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

推荐答案

你可以这样做，只需用 canvas

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

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