如何设置图像的高度和宽度，使其适合 fabric.js 中我的 canvas 的大小？

Question

所以我的 canvas 中有一张图片，我正在尝试使图片适合 canvas（我希望 canvas 中的图片大小相同作为 canvas)。我使用 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,
});

如何设置图像的高度和宽度，使其适合 fabric.js 中我的 canvas 的大小？

How do I set both height and width of image so that it can fit the size of my canvas in fabric.js?

javascript

css

canvas

fabricjs

reactjs