Canva - Fabric JS - Proportional image inside a container

Asked

Viewed 11 times

0

I need to resize the image with width=100% and height=auto inside the Canvas - Fabric JS. I tried several ways, but without success.

jQuery

   $(document).on('change', '#id_universo_imagem', function(){
        var id_universo = $("#id_universo_imagem").val();
        console.log('ID Universo: ', id_universo)

        $.ajax({
            url: BASE_URL + "/continentes/get_imagem_universo",
            type: "POST",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            data: {id_universo:id_universo},
            success:function(response){
                exibir_imagem(BASE_URL +"/uploads/" + response);
            },
        });
    })


    function exibir_imagem(imagem)
    {

        // Inicia o Plugin
        var canvas = new fabric.Canvas('canvas');  

        // Define a imagem que será apresentada em background 
        fabric.Image.fromURL(imagem, function(img) {
            // add background image
            canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
                scaleX: canvas.width / img.width,
                scaleY: canvas.height / img.height                
            });
        });
    }

The image coming from the database returns normally, only in the view runs through the screen. I tried to do too:

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.renderAll();
}

// resize on init
resizeCanvas();

Still gets the image out of container.

inserir a descrição da imagem aqui Stay that way

How can I fix?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.