Извлечение данных exif / поворот изображения, добавленного в fabri c. js canvas

Question

В моем веб-приложении пользователи могут делать фотографии на своих телефонах из файла ввода типа.

До того, как я использовал js загрузку библиотеки изображений для автоматического определения данных EXIF ​​и их поворота в случае необходимости .

Теперь я переключился на библиотеку fabri c. js, потому что я хочу позволить пользователям рисовать изображение на холсте перед его загрузкой.

Проблема в том, что я не знаю, как получить изображение exif или повернуть изображение при использовании fabri c. js.

Мой код:

Получение изображения из индексированный дБ

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

Фабри c. 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);
    }
}

Answer 1

Я знаю, что на это уже есть ответ, но я бы хотел предложить другую библиотеку. exif- js мертв - глючит и больше не поддерживается, с сотней нерешенных проблем.

Я бы хотел, чтобы вы попробовали exifr , который я начал разрабатывать из-за разочарований в exif- js.

Answer 2

Мне все-таки удалось сделать это самостоятельно, получив данные exif из файла изображения:

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

        // extract the exif data from image file using exif.js
        EXIF.getData(image, function() {
          let obj = EXIF.getAllTags(this);
          imageOrientation = obj.Orientation;
          console.log( imageOrientation );
        });

    })

Мне пришлось много масштабировать и изменять размеры, чтобы получить размер повернутого изображения и холста правильно:

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.scaleToWidth(canvas.width);

        if(imageOrientation == 3 || imageOrientation == 6 || imageOrientation == 8) {
            img.scaleToHeight(canvas.height);

            canvas.setHeight(img.getScaledHeight());
            canvas.add(img);

            img.scaleToWidth(canvas.height);
        img.scaleToHeight(canvas.width);
        img.rotate(getDegreesForOrientation(imageOrientation));
            img.center();
        } else {
            canvas.setHeight(img.getScaledHeight());

            canvas.add(img);
        }


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

    });
    // console.log('slika '+JSON.stringify(fabric.Image));


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