javascript - 如何在 fabric.js 中用 Canvas 保存图像

Question

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

Answer 1

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

1. 为此，使用 fabric.Image.fromURL() 函数加载图像，并在函数内部创建一个文本对象，用于显示 T 恤消息。 因此，您的图像和文本属于一个组对象。
2. 每次您要加载新文本时，您都调用 loadText 函数并更改文本对象。
3. 我还添加了 4 个按钮来操纵文本的上/下/左/右。

4. 您可以将 Canvas + 图像 + 文本导出到函数 saveImg() 中， 但在 jsfiddle 上，您会收到关于 Tained canvas 的安全消息。 发生这种情况是因为在示例中我从另一个域加载图像并且代码在另一个域上运行，您可以毫无问题地在您的 Web 应用程序上运行该代码。

5. 这是代码:

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

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

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