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

Question

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

Answer 1

你好，您必须使用包含消息的文本对象创建图像对象 (T 恤)。

为此，使用 fabric.Image.fromURL() 函数加载图像，并在函数内部创建一个文本对象，用于显示 T 恤消息。所以，你的图片和文字属于一个组对象。
每次您想加载新文本时，您调用 loadText 函数并更改文本对象。
我还添加了 4 个按钮以操纵 up/down/left/right 文本。
您可以将 canvas + 图像 + 文本导出到函数 saveImg()，但是在 jsfiddle 上，您会收到 Tained canvases 的安全消息。发生这种情况是因为在示例中，我从另一个域加载图像并在另一个域上加载代码运行，您可以运行在您的 Web 应用程序上毫无问题地加载该代码。

即代码:

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

这是 jsfiddle 示例：http://jsfiddle.net/tornado1979/zrazuhcq/1/

希望有所帮助，祝你好运。

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

How save image with canvas in fabric.js

javascript

canvas

html5-canvas

fabricjs