Javascript 如何在 fabric.js 中使用画布保存图像

How save image with canvas in fabric.js

提问by Bhupendra Jadeja

I am creating an application for T-shirt customization in which I have put the canvas on image using CSS, but the problem is saving that image as canvas. toDataURLjust gives part of the canvas area, but I want the whole image. There are other solutions on Stack Overflow but they do not solve this problem.

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

回答by Theo Itzaris

Hello, you have to create an image object (tshirt) with a text object that holds the message.

您好，您必须使用保存消息的文本对象创建一个图像对象（t 恤）。

1. 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.
2. every time you want to load new text , you call the loadTextfunction and you change the text object.
3. i also added 4 buttons in order to manupulate up/down/left/right the text .

4. 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.

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

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

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

4. 您可以将画布 + 图像+ 文本导出到函数saveImg() 中，但在 jsfiddle 上，您将收到一条关于Tained canvases的安全消息。发生这种情况是因为在示例中我从另一个域加载图像并且代码在另一个域上运行，您可以在您的 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/

hope helps, good luck.

希望有帮助，祝你好运。