Fabric JS switch Image

by mishragaurav31

HTML

<script src="http://fabricjs.com/lib/fabric.js"></script>
<canvas id="c" width="500" height="500"></canvas><br />
<a href="#" class="switch">Switch logo</a><br />

CSS

#c{
    background-color: #000;
}

JavaScript

$(document).ready(function(){

    var canvas = new fabric.Canvas('c');
    
    var logo;
    fabric.Image.fromURL('https://smerabags.com/wp-content/uploads/2017/07/Clutches-1024x1024.jpg', function(img) {
        logo = img.set({ left: 0, top: 250, angle: -10 })
        canvas.add(logo);
        canvas.renderAll();
    });

    $('.switch').click(function(){

        var positionScale = canvas.item(0).getScaleX();
        var positionLeft = canvas.item(0).getLeft();
        var positionTop = canvas.item(0).getTop();
        var positionAngle = canvas.item(0).getAngle();
        
        canvas.remove(logo);
        fabric.Image.fromURL('https://smerabags.com/wp-content/uploads/2017/07/Handwork-potli-1024x1024.jpg', function(img) {
            logo = img.set({ left: positionLeft, top: positionTop, angle: positionAngle })
            canvas.add(logo);
            canvas.item(0).scale(positionScale);
            canvas.renderAll();
        });
        
    });

});