如何在fabric.js中使用canvas保存图像

Question

如何在fabric.js中使用canvas保存图像

javascriptcanvashtml5-canvasfabricjs

6

我正在创建一个T恤定制应用程序，在其中使用CSS将画布放在图像上，但问题是将该图像保存为画布。toDataURL只给出画布区域的一部分，但我想要整个图像。Stack Overflow上有其他解决方案，但它们并没有解决这个问题。

- Bhupendra Jadeja

1

在画布上绘制整个图形？还是先在新画布上绘制背景，然后在这个新画布上绘制画布。 - Kaiido

这是一张图片，在上面我放置了画布。 - Bhupendra Jadeja

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Theo Itzaris · Accepted Answer

你需要创建一个包含信息的文本对象的图像对象（tshirt）。

to do that , load the image with fabric.Image.fromURL() function and inside the function , also create a text object that is going to show the tshirt message. so, your image and text belong to a group object.
every time you want to load new text , you call the loadText function and you change the text object.
i also added 4 buttons in order to manupulate up/down/left/right the text .
you can export the canvas + image+ text into the function saveImg(), but on the jsfiddle you will get a security message for Tained canvases. that happens because on the example i load the image from another domain and the code runs on another domain, you can run that code on your web application with no problem at all.

that is the code :

 var canvas = new fabric.Canvas('c');
 var scaleFactor=0.4

 canvas.backgroundColor = 'yellow';
 canvas.renderAll();
 var myImg = 'http://izy.urweb.eu/files/tshirt.jpg';



 fabric.Image.fromURL(myImg, function(myImg) {
var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });

var text = new fabric.Text('the_text_sample\nand more', {
            fontFamily: 'Arial',
            fontSize:20,
        });

text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
text.set("left",myImg.width*scaleFactor/2-text.width/2);

var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
canvas.add(group);    
});


$('#loadText').on('click',loadText);
$('#saveImg').on('click',saveImg);

function loadText(){
  console.log($('#logo').val());
   canvas._objects[0]._objects[1].text = $('#logo').val();
   canvas.renderAll();
}


function saveImg(){    
console.log('export image');
 if (!fabric.Canvas.supports('toDataURL')) {
  alert('This browser doesn\'t provide means to serialize canvas to an image');
}
else {
  window.open(canvas.toDataURL('png'));
}
}

$('#left').on('click',function(){
canvas._objects[0]._objects[1].set('left',canvas._objects[0]._objects[1].left-1);
canvas.renderAll();
})

$('#right').on('click',function(){
canvas._objects[0]._objects[1].set('left',canvas._objects[0]._objects[1].left+1);
canvas.renderAll();
})


$('#top').on('click',function(){
canvas._objects[0]._objects[1].set('top',canvas._objects[0]._objects[1].top-1);
canvas.renderAll();
})

$('#bottom').on('click',function(){
canvas._objects[0]._objects[1].set('top',canvas._objects[0]._objects[1].top+1);
canvas.renderAll();
})

that is the jsfiddle example: http://jsfiddle.net/tornado1979/zrazuhcq/1/

希望有所帮助，祝好运。