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.
How can I fix?