I have implemented a way of adding files to a HTML5 app (which IOS6 now allows) and resizing the images before uploading as not to cripple 3G. On chrome running on my Mac everything works fine but when i test in on IOS6 the image is completely squashed and nothing like it should be.
Try this JsFiddle in your browser and mobile browser (IOS6) and it should give you a better idea.
http://jsfiddle.net/Untd8/
See my answer to HTML5 Canvas drawImage ratio bug iOS
Basically it's a limitation in iOS where JPEGs over 2 megapixels are subsampled.
Related
I have an angular 2 application in production environment that allows you to choose a profile picture. Recently, performing tests with safari mobile, specifically for IOS 13.3.1 version(older) and IOS 13.4.1(new) version. I noticed that the image is shown rotated depending of safari browser version used (I built a stackblitz for this that you can review):
IOS 13.3.1 version(older)
IOS 13.4.1(new)
When I take images from an iPhone's in portrait mode and upload the image to my app it is shown rotated only for IOS 13.3.1 version(older). However, I examined the EXIF meta-information images from each of my devices and found that both images have the same value in the orientation property:
IOS 13.3.1 version(older)
IOS 13.4.1(new)
My question is. Why does the image display change depending on the IOS version, knowing that in both cases the orientation EXIF is the same value (6)?
This is a subject that worries me since I had already solved this problem by rotating the image depending of EXIF orientation value for its correct display (e.g. exif.js have been created to handle this situation by detecting the exif orientation flag), but this problem now appears again with the new version of IOS. What would be an example of code that I can use to make it sustainable over time? Is there not a consensus among the browsers to manage the orientation of the images?
What is the explanation for this illogical behavior?
Thank you so much!
We also stumbled upon this when our mobile suddenly behaved differently and finally find the root cause of this.
Both WebKit (iOS) and Android (Chrome) have just recently changed the default behavior of the image-orientation CSS propterty. While it was none before, it is now from-image. This means: Before, they ignored the EXIF data of an image by default, while they are now using it to auto-correct the image. Which break our own auto-correction based on the exifreader library.
Here are some relevant links:
https://www.fxsitecompat.dev/en-CA/docs/2020/jpeg-images-are-now-rotated-by-default-according-to-exif-data/
https://bugs.webkit.org/show_bug.cgi?id=89052
Funny enough, also the Slack team seems to have run into this:
https://bugzilla.mozilla.org/show_bug.cgi?id=1634180
Fortunately, the author of the exifreader library (who just some weeks later ran into the same problems) also guided me to a way to detect the behavior. You can find his answer here:
https://github.com/mattiasw/ExifReader/issues/99#issuecomment-640217716
I also noticed that Modernizr has a test for this, so I am actually using a custom modernizr build now to detect the browser behavior.
The webkit browser is rotating the images before you upload them based on the EXIF data then it gets applied again by your app. We were able to confirm this on new (81) version of Chrome and Mobile Safari on 13.4. then the app is rotating them further and it gets twisted.
I am a Front-End developer.
Recently, I noticed about image rendering problem in IE11 on my desktop.
Here is the screenshots.
IE11 .png rendering
Chrome 48.0 .png rendering
As you can see, there is difference in image quality between IE and Chrome.
My question is, if possible, how IE11 can show the image like the Chrome's.
(showed smoothly)
I'm building a multiplatform HTML5 canvas game with EaselJS (although I tested without using this library and the problem persists);
I'm loading an image in that is 1280 x 1800 and then rendering it to the canvas.
This runs as expected on all devices except the ipad 1st gen running iOS5.
It loads and draws the image to canvas at 640x900...
I alerted Image.width with a result of 640, so I don't think it has anything to do with the actual rendering to canvas but rather limitations to image size with iOS5?
As a work around I am scaling the image up, so it just appears lower quality on this particular device, but I'm looking for a solution or at least explanation of why this is happening!
here is an example of the problem:
http://kokodev.co.uk/ipadcanvasimageproblem/
I also connected the iPad to the xCode organizer console to see if it reported any errors or memory warnings, but it did not!
I am creating an application that allows users to draw on the screen using the HTML5 Canvas tag.
This works great when using a mouse, and I even got it working on android using jquery touch.
The problem comes when using a windows 7 or 8 tablet. The reason for why it wont work is simple, the browser tries to scroll instead of mousedown and drag.
The reason why it works on android and not windows is due to the fact that android supports ontouchstart and ontouchend while I can't get it to work on windows tablets.
So, is there any way to get the browser to stop trying to scroll and draw on the screen?
Thanks.
The javascript library I have created just translates a single picture and zooms it. Touch events and mouse events are used depending on what device.
I ran this javascript code on Firefox (7.0.1), iPhone 3GS (iOS 5.0) and iPhone 4 (iOS 5.0) all with smooth performance, no problem at all.
Then I ran it on iPad 1 (iOS 5.0) with slow performance though zooming and translating the picture works.
Last test was on iPad 2 (iOS 4.3.3) and here I experienced the same slow performance while zooming as iPad 1 but the translating didnt work at all.
I have no clue what this is about, since iPhone is supposed to be alot weaker than an iPad. I would appreciate any help or comments to get me on the right track.
http://pastebin.com/wZ7e77yq
UPDATE
I just ran it on an iPad 2 (iOS 5.0) and it works flawlessly. I also tried iPhone 3GS (iOS 4.2.1) and it didnt work, same as iOS 4.3.3. This means that my application needs iOS 5.0 to run... is it really true you couldnt translate objects before iOS 5.0?
UPDATE2
I just ran it on three different iPad 1s (iOS 5.0) and it doesnt work very good. What is the big difference in between an iPhone 4 and an iPad 1? Specs are almost identical. Also the translate didnt work because the function event.pageY/X doesnt work prior to iOS 5. This was fixed by using event.touches.pageX/Y instead.
Well I was developing a small game for testing canvas performance without any special game framework so I kept it simple because I was writing it by myself. The program did nothing special, just moving a sprite around the screen with different joystick types, such as keyboard and mouse for desktop click, and touch events for iOS. I discovered the following:
Using taps direct on the canvas results in poor performance compared to touch events.
Touch events worked well with different canvas sizes up to 1024x768.
I didn't try picture zooming, but that should have be fine as well.
event.pageX, event.pageY worked without problems on iPad (iOS5).
I hope that helps.
Seems like perhaps iOS CANVAS support was the issue. iOS5 has full GPU hardware-accelerated CANVAS support, while previous versions supported CANVAS albeit very poorly.
Surprised that it does not work well on iPad 1 even with iOS 5, though. Can you try closing all currently-running apps, close all other browser tabs, and run the test again?