Monday, May 13, 2024
 Popular · Latest · Hot · Upcoming
192
rated 0 times [  199] [ 7]  / answers: 1 / hits: 28929  / 9 Years ago, mon, july 27, 2015, 12:00:00

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. toDataURL just 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.



enter


More From » canvas

 Answers
21

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




  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 loadText function 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_samplenand 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/




hope helps, good luck.


[#65660] Friday, July 24, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kylanalis

Total Points: 438
Total Questions: 85
Total Answers: 102

Location: Barbados
Member since Sun, Nov 27, 2022
1 Year ago
kylanalis questions
Sat, Oct 2, 21, 00:00, 3 Years ago
Tue, Oct 13, 20, 00:00, 4 Years ago
Thu, Feb 13, 20, 00:00, 4 Years ago
Tue, Jan 7, 20, 00:00, 4 Years ago
;