Как в fabri c. js установить высоту и ширину изображения, чтобы оно соответствовало размеру моего холста?

Question

Итак, у меня есть изображение на моем холсте, и я пытаюсь подогнать изображение под холст (я хочу, чтобы изображение внутри холста было того же размера, что и холст). Я использую scaleToWidth() и scaleToHeight(), чтобы установить размер изображения. Но работает только один из них. Если я использую только scaleToWidth(), он правильно масштабирует ширину, а если я использую только scaleToHeight(), он правильно масштабирует высоту. В приведенном ниже коде высота масштабируется правильно, как указано в строке ниже oImg.scaleToWidth(cDim.clientWidth). Но я хочу, чтобы ширина и высота соответствовали моим значениям. Как я могу это сделать?

                const canvas = new window.fabric.Canvas('c');
                const cDim = document.getElementById("canvas-dimension");
                console.log("Canvas Height: " + cDim.clientHeight);
                console.log("Canvas Width: " + cDim.clientWidth)
                let planURL = baseURL + "dream" + "/" +  "plan";
          

                window.fabric.Image.fromURL(planURL, (oImg) => {
                    
                    //let scaleW = cDim.clientWidth / oImg.getWidth;
                    // let scaleH = cDim.clientHeight / oImg.getHeight;
                   // oImg.scaleX(scaleW)

                    oImg.scaleToWidth(cDim.clientWidth)
                    oImg.scaleToHeight(cDim.clientHeight)
             
      
                    canvas.setBackgroundImage(oImg);
                    canvas.renderAll();

                },{ crossOrigin: 'anonymous'});
                setCanvas(canvas)

Мы будем благодарны за любую помощь или обходной путь. Спасибо!

Answer 1

РЕШЕНО

Итак, я использовал этот подход вместо scaleToWidth и scaleToHeight, и он сработал!

let scaleW = cDim.clientWidth / oImg.width;
let scaleH = cDim.clientHeight / oImg.height;
oImg.set({
     opacity: 1,
     scaleX: scaleW,
     scaleY: scaleH,
});