Làm cách nào để điều chỉnh hướng của hình ảnh để hiển thị chế độ xem trước phù hợp của hình ảnh?

Tôi đã phát triển một ứng dụng web laravel có chức năng chấp nhận hình ảnh được tải lên bởi người dùng và sau đó hiển thị nó. Tôi đã gặp phải một vấn đề trong khi thử nghiệm khi các bức ảnh được tải lên bằng điện thoại di động đang xoay 90 độ theo hướng chống đồng hồ thông minh, tôi đã sử dụng can thiệp hình ảnh để giải quyết vấn đề đó. Nhưng khi tôi hiển thị bản xem trước của hình ảnh được tải lên cho người dùng bằng cách sử dụng javascript, hình ảnh được xoay 90 độ nhưng khi tôi lưu hình ảnh thì nó trở nên phù hợp. Mã javascript của tôi là

    function imagePreview(input,elm) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $(elm).css("background-image","url('"+e.target.result+"')");
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#settings_img").on("change",function(){
        imagePreview(this,"#settings_img_elm");
    });

bất cứ ai có thể xin vui lòng giúp tôi định hướng đúng hình ảnh xem trước bằng cách chỉnh sửa mã ở trên để hướng của hình ảnh thay đổi khi cần thiết.

Làm thế nào về việc chỉ xoay hình ảnh với CSS?

reader.onload = function (e) {
    $(elm).css({
        "background-image":"url('"+e.target.result+"')",
        "transform": "rotate(90deg)"
    });
}

Chỉnh sửa: Chà, sau một thời gian ngắn đi sâu vào thế giới dữ liệu EXIF, tôi nghĩ rằng tôi có thể có một giải pháp cho bạn. Tôi đã mượn hàm getOrientation () của Ali , như @Nick đề xuất, và sau đó tôi chỉ sửa hướng bằng CSS như sau:

function correctOrientation(element, orientation){
    switch (orientation) {
      case 2: $(element).css("transform", "scaleX(-1)");
        break;
      case 3: $(element).css("transform", "rotate(180deg)");
        break;
      case 4: $(element).css("transform", "rotate(180deg) scaleX(-1)");
        break;
      case 5: $(element).css("transform", "rotate(-90deg) scaleX(-1)");
        break;
      case 6: $(element).css("transform", "rotate(90deg)");
        break;
      case 7: $(element).css("transform", "rotate(90deg) scaleX(-1)");
        break;
      case 8: $(element).css("transform", "rotate(-90deg)");
        break;
      default: break;
    }
}

vĩ cầm

Và nếu bạn cần các tệp ví dụ để kiểm tra nó, hãy lấy chúng ở đây .

Chỉnh sửa: Đặt hình ảnh được tải lên <img>thay vì hình nền của div: https://jsfiddle.net/ynzvtLe2/2/

Điều này nên làm việc. Ở đây tôi có được hướng ban đầu của tệp hình ảnh và sau đó xây dựng một khung vẽ với hiệu chỉnh xoay phù hợp. Sau đó chúng tôi đặt hình ảnh xoay chính xác làm bản xem trước.

function imagePreview(input,elm) {
    // image file
    var file = input.files[0]; 

    if (!file.type.match('image/jpeg.*')) {
        // image is not a jpeg, do something?
    }

    var reader = new FileReader();
    reader.onload = function(e) {
        var exif = piexif.load(e.target.result);
        var image = new Image();
        image.onload = function () {
            //get original orientation of the uploaded image
            var orientation = exif["0th"][piexif.ImageIFD.Orientation];

            // Build a temperory canvas to manipulate image to required orientation
            var canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            var ctx = canvas.getContext("2d");
            var x = 0;
            var y = 0;
            ctx.save();
            if (orientation == 2) {
                x = -canvas.width;
                ctx.scale(-1, 1);
            } else if (orientation == 3) {
                x = -canvas.width;
                y = -canvas.height;
                ctx.scale(-1, -1);
            } else if (orientation == 4) {
                y = -canvas.height;
                ctx.scale(1, -1);
            } else if (orientation == 5) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                y = -canvas.width;
                ctx.scale(1, -1);
            } else if (orientation == 6) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
            } else if (orientation == 7) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                ctx.scale(-1, 1);
            } else if (orientation == 8) {
                canvas.width = image.height;
                canvas.height = image.width;
                ctx.translate(canvas.width, canvas.height / canvas.width);
                ctx.rotate(Math.PI / 2);
                x = -canvas.height;
                y = -canvas.width;
                ctx.scale(-1, -1);
            }
            ctx.drawImage(image, x, y);
            ctx.restore();

            var dataURL = canvas.toDataURL("image/jpeg", 1.0);

            // set the preview image to your element
            $(elm).css("background-image","url('"+dataURL+"')");
        };
        image.src = e.target.result;
    };

    reader.readAsDataURL(file);

}


$("#settings_img").on("change",function(){
    imagePreview(this,"#settings_img_elm");
});

Đảm bảo bao gồm thư viện này trước: https://github.com/hMatoba/piexifjs

Tôi đã nhận được sự giúp đỡ từ tài liệu: https://readthedocs.org/projects/piexif/doads/pdf/latest/