javascript - Mobile Safari renders <img src="data:image/jpeg;base64..."> scaled on Canvas?

Question

I try to render a local image loaded with a FileReader object on a Canvas on Safari Mobile on iOS6. But every image with data-URL gets rendered vertically scaled. Is this a bug? On Chrome it's rendered correctly.

• Demo Script

ScreenShot from iOS6 (above: Canvas, below: Original Image)

Is there any way to work-around this bug? Is this a bug?

If I resize the image on the device first with the "PhotoWizard" App (scale it down to 720px width), the Canvas renders it correctly. It seems to be a problem with image size or images taken with the Camera App:

• Working Demo Script

Tried suggestions from Jake Archibald, looks a bit better, but still gets vertically scaled:

• Modified Demo Script
• ScreenShot from iOS6

I tried it today on a Galaxy Nexus with Android 4.1.1 installed. Works like expected, so this really looks like a mobile Safari issue:

• ScreenShot from Android 4.1.1

Answer 1

This might be related to the restriction which resides in iOS Safari resource limitation. According to following link, JPEG files over 2M pixels will be subsampled.

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

I'm doubting that canvas in Safari cannot deal with this subsampling correctly.

I've created some workaround detecting whether the image is subsampled or not and stretching it to original size.

https://github.com/stomita/ios-imagefile-megapixel