jquery - 设置 fabric js Canvas 的 100% 高度和宽度

Question

我想根据背景图片设置 Canvas 的高度和宽度。

例如，如果图像的高度和宽度小于屏幕尺寸，则 Canvas 尺寸为屏幕的 100%，如果图像尺寸大于屏幕尺寸，则 Canvas 会根据它进行调整，而不会切割图像并显示滚动条。

目前，我已经修复了 Canvas 的高度和宽度

 <canvas id="canvas" width="720" height="800"></canvas>

背景图片代码为

 canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), {      
    });

如何让 Canvas 高度和宽度动态化？

Answer 1

我已经使用

设置了动态 Canvas 大小

    var image = new Image()
    image.src = './img/form.jpg';
    image.onload = function () {
        var canv = $('#canvas');
        canv.attr('width', image.width);
        canv.attr('height', image.height);
        canvas.dispose();
        setTimeout(() => {
            canvas = new fabric.Canvas('canvas');
            canvas.setBackgroundImage('./img/form.jpg', canvas.renderAll.bind(canvas), {});
        }, 500);

    };