如何在另一个背景图像上保存fabricjs画布图像？

Question

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 1

use your data url as the background property for something..

    var dataurl = canvas.toDataURL({
        format: 'png',
        multiplier: 2,
        left: 300,
        height: 500,
        width: 500
    });
    someElement.style.background = "url("+dataurl+")";

Answer 2

Run the snippet and click on click me then canvas converted into image. I thing this is helpful for you

 var canvas = new fabric.Canvas('canvas'); canvas.setBackgroundImage('https://c1.staticflickr.com/5/4051/4510967899_293f0dd5ac_z.jpg', canvas.renderAll.bind(canvas), // here set the crossOrigin attribute {crossOrigin: 'anonymous'} ); document.getElementById('file').addEventListener("change", function(e) { var file = e.target.files[0]; var reader = new FileReader(); console.log("reader " + reader); reader.onload = function(f) { var data = f.target.result; fabric.Image.fromURL(data, function(img) { var oImg = img.set({ left: 70, top: 100, width: 250, height: 200, angle: 0 }).scale(0.9); canvas.add(oImg).renderAll(); canvas.setActiveObject(oImg); }); }; reader.readAsDataURL(file); }); document.querySelector('#txt').onclick = function(e) { e.preventDefault(); canvas.deactivateAll().renderAll(); document.querySelector('#preview').src = canvas.toDataURL(); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script> <div class="col-sm-12"> <div class="text-center" style="font-size:25;margin-top:17px;margin-bottom: 30px;"><strong>Customize T-Shirt From Here</strong> </div> <input type="file" id="file"> <br/> <canvas id="canvas" width="750" height="550" style="border: 1px solid black; box-shadow: rgba(0,0,0,0.8) 0 0 10px;"></canvas> <a href='' id='txt' target="_blank">Click Me!!</a> <br /> <img id="preview" /> </div> 

Answer 3

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

    }

};