Как сохранить изображение холста fabricjs на другом фоновом изображении?

Question

Я хочу сохранить изображение на другом изображении.

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

Здесь я могу получить изображение холста. Но я хочу сохранить его на фоновом изображении. Как это сделать?

Answer 1

я решил мою проблему следующим образом. Мое фоновое изображение открывается под другим идентификатором canvas MyID. Мой обычный идентификатор canvas - 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); 

    } 

}; 

Answer 2

использовать свой адрес данных в качестве свойства фона для чего-то ..

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

Answer 3

Выполните фрагмент и нажмите на кнопку затем мне холст преобразуется в изображение. Я, что это полезно для вас

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>