problem orientation 6, 8
kiyeon-jo opened this issue · 13 comments
I am trying to use 'blueimp-load-image' because of the 'image-orientation' problem when loading from canvas.
- read an image
- Set the 'orientation' option to 6
- The result is 8
- Even if you reverse, it is the same
- Except 6,8, other values work correctly.
I wonder why this is the result
The code is very simple
loadImage(file, (img, data) => {
console.log(data)
document.body.appendChild(img)
},
{
meta: true,
canvas: true,
orientation: 6
})
sample code link
https://codesandbox.io/s/mystifying-bas-8d26f?file=/src/index.js
Thanks for your reply.
But I have a question.
The 'orientation=true' option that you mentioned creates an image with 'orientation' applied to it.
I want to create a thumbnail image in the same form as the original photo without 'orientation' like the previous canvas.
So I forced myself to set the value of orientation={value}
And I confirmed today that the sample source made of 'codesandbox' works differently on PC chrome and mobile chrome browsers.
thanks for adding an option that does not apply 'orientation'
'orientation=false'
I added a code to change the image to its original state.
I'd like to hear your opinion.
This is a different code Url address from the sample code above.
https://codesandbox.io/s/fix-image-load-0gymd?file=/src/index.js
I tried several of the photo orientations offered here, some seem to fail indeed:
https://github.com/recurser/exif-orientation-examples
I have a similar problem. I use "orientation = true" in order to have my picture oriented correctly in browser. And then I get the orientation value from exif so I can send it to my server so picture is stored with this orientation.
But It looks like orientation from exif is wrong in some cases.
But when I use this code, orientation is perfectly extracted :
https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side/32490603#32490603
It happens on some pictures only. I can send them to you directly (it's my customers pictures, so I can't upload them here).
On last version of Chrome & Edge it works fine. But on Firefox 75 orientation is not applied at all (when orientation set to true). And I can get the real orientation value only from the stackoverflow function given before.
I also have a similar issue. When I scale an image down. Then in the callback function from "loadImage" method with orientation: true, I get different width and heigth for mobile Chrome browser and desktop Chrome browser.
@blueimp You are working on a fix for this? Do you have a timeframe on when this is done?
Thanks for the library.
The fix is already in the master branch and I'll likely release a new version within the next 24 hours.
It was more effort than expected, largely because of a bug in Chromium (and related browsers) when cropping an auto-oriented image:
https://bugs.chromium.org/p/chromium/issues/detail?id=1074354
I've attached a minimal test case on that bug report.
Here the code for reference:
<script>
// Code adapted from
// https://github.com/blueimp/JavaScript-Load-Image/blob/24eda0f970b69f681dd76f4ed04e3e041a9bc1fa/js/load-image-orientation.js#L67-L103
function imageOrientationTest($, cb) {
// black+white 3x2 JPEG, with the following meta information set:
// - EXIF Orientation: 6 (Rotated 90° CCW)
// Image data layout (B=black, F=white):
// BFF
// BBB
var testImageURL =
'data:image/jpeg;base64,/9j/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAYAAAA' +
'AAAD/2wCEAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBA' +
'QEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQE' +
'BAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAf/AABEIAAIAAwMBEQACEQEDEQH/x' +
'ABRAAEAAAAAAAAAAAAAAAAAAAAKEAEBAQADAQEAAAAAAAAAAAAGBQQDCAkCBwEBAAAAAAA' +
'AAAAAAAAAAAAAABEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AG8T9NfSMEVMhQ' +
'voP3fFiRZ+MTHDifa/95OFSZU5OzRzxkyejv8ciEfhSceSXGjS8eSdLnZc2HDm4M3BxcXw' +
'H/9k='
var img = document.createElement('img')
img.onload = function () {
// Check if the browser supports automatic image orientation:
$.orientation = img.width === 2 && img.height === 3
if ($.orientation) {
var canvas = document.createElement('canvas')
canvas.width = canvas.height = 1
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 1, 1, 1, 1, 0, 0, 1, 1)
// Check if the source image coordinates (sX, sY, sWidth, sHeight) are
// correctly applied to the auto-orientated image, which should result
// in a white opaque pixel (e.g. in Safari).
// Browsers that show a transparent pixel (e.g. Chromium) fail to crop
// auto-oriented images correctly and require a workaround, e.g.
// drawing the complete source image to an intermediate canvas first.
// See https://bugs.chromium.org/p/chromium/issues/detail?id=1074354
$.orientationCropBug =
ctx.getImageData(0, 0, 1, 1).data.toString() !== '255,255,255,255'
}
if (cb) cb($, img, canvas)
}
img.src = testImageURL
}
window.addEventListener('load', function () {
imageOrientationTest({}, function ($, img, canvas) {
var node
img.style.height = $.orientation ? '60px' : '40px'
img.style.imageRendering = 'crisp-edges'
img.style.imageRendering = 'pixelated'
document.body.style.background = 'lightgray'
document.body.appendChild(img)
if ($.orientation) {
node = document.createElement('pre')
node.style.display = 'inline'
node.appendChild(
document.createTextNode(
' drawImage(img, 1, 1, 1, 1, 0, 0, 1, 1) \u2b95 '
)
)
document.body.appendChild(node)
canvas.style.height = '20px'
canvas.style.imageRendering = 'crisp-edges'
canvas.style.imageRendering = 'pixelated'
canvas.style.border = '1px dotted red'
document.body.appendChild(canvas)
$.imageData = canvas.getContext('2d').getImageData(0, 0, 1, 1)
}
node = document.createElement('pre')
node.appendChild(document.createTextNode(JSON.stringify($, null, 2)))
document.body.appendChild(node)
})
})
</script>
This has been fixed in 24eda0f.
A new package has been released as blueimp-load-image@4.0.0
.
I tested your fix, but it didn't solve the problem I encounter.
I use the loadimage in order to load a picture from a file, rotate the picture automatically, display it on browser, and store image orientation in my database.
-
When I use a browser that supports automatic image orientation, the image is well rotated.
-
When I use a browser that do not support automatic image orientation, the image is not rotated at all
On both cases, I read image orientation from exif from your library and then from this one https://www.npmjs.com/package/browser-image-compression ( imageCompression.getExifOrientation(file: File) ) and I don't get the same values.
This bug happens on some pictures only.
I can send you some of the pictures that produces this bug privately (it's customers pictures).
@flexilivre
I don't think you should share your customer's pictures with a third-party developer (unless you have their specific agreement). I also prefer to not take any responsibility for personal data of others.
The tests contained in this project cover orientation with various option settings, check the resulting image data and run on Chrome in a Linux Docker container for each push to GitHub.
I ran the same tests successfully with Chrome, Firefox, and Safari on macOS and IE11, Edge Legacy and Edge Chromium on Windows 11 as well as Mobile Safari and Mobile Chrome.
I've also done extensive manual testing with the exif orientation sample images and various other test images with and without EXIF orientation information, including pictures that I've taken with my own smartphone camera.
So I'm rather confident that the fix works as expected, but of course this code has not been formally verified and there can always be edge cases.
What you can do is test your sample pictures on the demo site:
https://blueimp.github.io/JavaScript-Load-Image/
The demo is a static website and does not send data anywhere.
You could also analyze those sample images with Phil Harvey's ExifTool to identify their EXIF orientation values.
Please let me know if you can reproduce unexpected behavior with your sample images on the demo or find discrepancies in the detected orientation value between exiftool
and this library.
@blueimp I have the autorisation from 2 of my customers to use some of their pictures for debugging purpose. But yes you are right about sharing them with third party. I am going to ask them in case you need those pictures.
I did the test on demo site, same problem.
I used Phil Harvey's ExifTool and it displays -> Orientation : Horizontal (normal)
When demo displays -> Orientation : bottom-right
Here screenshots :
- Chrome 81.0.4044.122 : image rotated properly
- Firefox 75 : image not rotated properly