时间戳

首页 > 解决方案 > 设置织物js画布的100％高度和宽度

jquery - 设置织物js画布的100％高度和宽度

问题描述

我想根据背景图像设置画布的高度和宽度。

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

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

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

背景图像代码是 

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

如何使画布高度和宽度动态？

标签： jqueryhtmlcsscanvasfabricjs

解决方案

我已经使用设置动态画布大小 

    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);

    };

推荐阅读