动态缩放画布大小以适应图像 fabric.js

【问题标题】：scaling canvas size dynamically to fit image fabric.js动态缩放画布大小以适应图像 fabric.js
【发布时间】：2015-09-15 12:36:49
【问题描述】：

我正在使用fabric.js 开发小型应用程序，其中我必须在画布上从系统加载图像并且动态画布大小应该更改以适合图像。谁能帮我吗？

function main() {

    canvas = new fabric.Canvas('imageCanvas');

    // loading image on canvas
    document.getElementById('uploadedImg').onchange = function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            var imgObj = new Image();
            imgObj.src = event.target.result;

            imgObj.onload = function () {

                // start fabricJS stuff
                image = new fabric.Image(imgObj);
                image.set({

                    centeredRotation: true,
                    centeredScaling: true,
                });

                canvas.add(image);
            };

        };
        reader.readAsDataURL(e.target.files[0]);
    };
}

【问题讨论】：

请提供您的代码，我们会帮助您解决问题。

标签： image canvas resize size fabricjs

【解决方案1】：

这个函数内部

 imgObj.onload = function () {

                // start fabricJS stuff
                image = new fabric.Image(imgObj);
                image.set({

                    centeredRotation: true,
                    centeredScaling: true,
                });

                canvas.add(image);
            };

您可以使用 imgObj.width 和 imgObj.height 获取图像高度和宽度

然后设置像这样的画布尺寸

canvas.setHeight(imgObj.height);
canvas.setWidth(imgObj.width);

这样

imgObj.onload = function () {

 canvas.setHeight(imgObj.height);
canvas.setWidth(imgObj.width);
                // start fabricJS stuff
                image = new fabric.Image(imgObj);
                image.set({

                    centeredRotation: true,
                    centeredScaling: true,
                });

                canvas.add(image);
            };

【讨论】：