提取exif数据/旋转图像添加到fabric.js画布

Question

在我的Web应用程序中，用户可以从输入类型文件在手机上拍照。

在使用js load image库自动检测EXIF数据并将其旋转（如有必要之前）。>

现在我已切换到fabric.js库，因为我希望允许用户在上传画布图像之前在其上进行绘制。

问题是使用fabric.js时我不知道如何获取图像exif数据或旋转图像。

我的代码：

从索引数据库获取图像

var image;
localforage.getItem('photo').then(function(value) {
            image = value;

            // THIS IS OLD CODE, BEFORE I USER js-load-image to automatically detect exif data
            // and rotate if neccessary, then I just appended the result to wrapper
            // $("#preview-wrapper").empty();
            // if (image) {
            //    loadImage(
            //      image,
            //      function(img) {
            //        $("#preview-wrapper").append(img);
            //      },
            //      {orientation: true} // Options
            //    );
            // }

        })
 loadFabricOnImageLoad(); // append image to fabric canvas
Fabric.js函数

function loadFabricOnImageLoad(){

    if(typeof image !== "undefined" && image){

        let loaded = false;
        if (loaded) {return;}
        var c = document.getElementById('myCanvas');
        canvas = new fabric.Canvas(c);
        canvas.setWidth(width);
        canvas.setHeight(500);
        canvas.selection = false;

        var url = URL.createObjectURL(image);

        fabric.Image.fromURL(url, function(img) {
            img.set({
                left: 0,
                right: 0,
                top: 0,
            });

            img.scaleToWidth(width);

            canvas.add(img);

            canvas.setHeight(img.getScaledHeight());

            $("#canvas-loader").hide();

        });  

        fabric.Object.prototype.set({
            evented: false
        });

        canvas.freeDrawingBrush = new fabric['PencilBrush'](canvas);
        canvas.freeDrawingBrush.color = 'Red';
        canvas.freeDrawingBrush.width = 6;

        loaded = true;
    } else {
        setTimeout(loadFabricOnImageLoad, 250);
    }
}

在我的Web应用程序中，用户可以从输入类型的文件在手机上拍照。在我使用js加载图像库来自动检测EXIF数据并将其旋转（如有必要）之前。现在我切换到...

Answer 1

毕竟，我已经设法通过从图像文件中获取exif数据来做到这一点：