isuru isuru - 1 month ago 15
Javascript Question

How to save fabricjs canvas image on another background image?

I want to save my canvas image on another image.

$(document).on('click','#local-save', function(event) {

var imgURL = "assets/images/bg.png";

canvas.overlayImage.filters = [];
canvas.overlayImage.applyFilters();


canvas.renderAll();

window.open(canvas.toDataURL({
format: 'png',
multiplier: 2,
left: 300,
height: 500,
width: 500
}));
});


In here I can get canvas image. But I want to save it on background image. How to do this?

Answer

I have solved my problem as follows. My background image open under another canvas id MyID. My normal canvas id is canvas .

    var MaskImg = canvas.toDataURL({
    format: 'png',
    multiplier: 2,
    left: 300,
    height: 400,
    width: 400
});

var c=document.getElementById("MyID");
var ctx=c.getContext("2d");

c.width = 1748;
c.height = 2481;
var imageObj1 = new Image();
var imageObj2 = new Image();

imageObj1.src = "assets/images/bg.png"

imageObj1.onload = function() {
    ctx.drawImage(imageObj1, 0, 0, 1748, 2480);
    imageObj2.src = MaskImg;
    imageObj2.onload = function() {
       event.preventDefault();
       ctx.drawImage(imageObj2, (100, 100 , 400, 400);
       event.preventDefault();
                   var img = c.toDataURL({
                        format: 'png',
                   });

    window.open(img);

    }

};
Comments