Изменение размера изображения на холсте - Fabricjs

Question

Я использую fabricjs для воспроизведения с холстом и загрузки изображения в него с помощью javascript.

У меня есть функция, которая изменяет размер холста, чтобы сделать его отзывчивым и как таковое хотел бы изменить размер фонового изображения, которое было загружено, чтобы оно соответствовало холсту, но сохраняйте пропорции.

Я не нашел примеров, которые соответствуют моим критериям, и я надеюсь, что кто-то может помочь.

Javascript

var canvas = new fabric.Canvas('drawing_layer'); 
var img = new Image(); 
      img.onload = function() { 
       canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), { 
        originX: 'left', 
        originY: 'top', 
        left: 0, 
        top: 0 
       }); 

// initially sets width of canvas to fit the image 
       canvas.setDimensions({ 
        width: img.width, 
        height: img.height 
       }); 
      }; 
// below is a call to function that resizes the canvas 
resizeCanvas(); 

//sets listener to resize event 
      window.addEventListener('resize', resizeCanvas); 

Answer 1

Ваш resizeCanvas() должен выглядеть следующим образом:

resizeCanvas(width, height) { 
    canvas.backgroundImage.scaleToWidth(width); 
    canvas.backgroundImage.scaleToHeight(height); 
    canvas.setDimensions({width: width, height: height}); 
    canvas.renderAll(); 
} 

И вы должны быть в порядке.