javascript - Mobile Safari 渲染 在 Canvas 上缩放？

Question

我尝试在 iOS6 上的 Safari Mobile 上的 Canvas 上渲染加载了 FileReader 对象的本地镜像。但是每个带有数据 URL 的图像都会被垂直缩放。这是一个错误吗？在 Chrome 上它可以正确呈现。

• Demo Script

ScreenShot from iOS6 (上图: Canvas ，下图:原始图像)

有什么办法可以解决这个问题吗？这是错误吗？

如果我首先使用“PhotoWizard”应用程序在设备上调整图像大小(将其缩小到 720 像素宽度)，Canvas 会正确渲染它。这似乎是图像大小或使用相机应用程序拍摄的图像的问题:

• Working Demo Script

尝试了来自 Jake Archibald 的建议，看起来好一点，但仍然垂直缩放:

• Modified Demo Script
• ScreenShot from iOS6

我今天在安装了 Android 4.1.1 的 Galaxy Nexus 上试用了它。工作正常，所以这看起来真的像是一个移动 Safari 问题:

• ScreenShot from Android 4.1.1

Answer 1

这可能与 iOS Safari 资源限制中的限制有关。根据以下链接，超过 200 万像素的 JPEG 文件将被二次采样。

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

我怀疑 Safari 中的 Canvas 无法正确处理这种子采样。

我已经创建了一些解决方法来检测图像是否被二次采样并将其拉伸(stretch)到原始大小。

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