How can I shoot canvas front and then back with html2canvas

  canvas, javascript

I use this open source code open source code here and try to photograph the front and back of the T-shirt.
As in the image there should be everything I have added to it
I try with this code:

My idea is to take a picture of the T-shirt from the front and then turn it over and take a picture of it from the back.

        $("#tshirtFacing").attr("src", assets_folder + "img/crew_front.png");

        a = JSON.stringify(canvas);
        canvas.clear();
        try {
            var json = JSON.parse(b);
            canvas.loadFromJSON(b);
        } catch (e) {}

        canvas.renderAll();
        setTimeout(function() {
            canvas.calcOffset();
        }, 200);

        html2canvas(document.querySelector("#shirtDiv"), {
            useCORS: true,
            width: 530,
            height: 630,
            windowWidth: 530,
            windowHeight: 630,
            x: 195,
            y: 0,
            scrollY: -410
        }).then(canvas => {
            var data = canvas.toDataURL('image/png');
            var image = new Image();
            image.src = data;
            document.querySelector("#image_get").append(canvas);

        });

        $("#tshirtFacing").attr("src", assets_folder + "img/crew_back.png");
        b = JSON.stringify(canvas);
        canvas.clear();
        try {
            var json = JSON.parse(a);
            canvas.loadFromJSON(a);
        } catch (e) {}

        canvas.renderAll();
        setTimeout(function() {
            canvas.calcOffset();
        }, 200);

        html2canvas(document.querySelector("#shirtDiv"), {
            useCORS: true,
            width: 530,
            height: 630,
            windowWidth: 530,
            windowHeight: 630,
            x: 195,
            y: 0,
            scrollY: -410
        }).then(canvas => {
            var data = canvas.toDataURL('image/png');
            var image = new Image();
            image.src = data;
            document.querySelector("#image_get").append(canvas);

        });

This code work fine but i see only text. The images I add are not displayed in the final photos

Source: Ask Javascript Questions

LEAVE A COMMENT