javascript - Mobile Safari renders 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

これは、iOS Safari のリソース制限にある制限に関連している可能性があります。次のリンクによると、2M ピクセルを超える JPEG ファイルはサブサンプリングされます。

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

Safari のキャンバスがこのサブサンプリングを正しく処理できないとは思えません。

画像がサブサンプリングされているかどうかを検出し、元のサイズに引き伸ばす回避策をいくつか作成しました。

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