Mobile Safari在Canvas上呈现<img rel="nofollow noreferrer" src ="data:image/jpeg; base64 ...">缩放？

Question

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

• 演示脚本

来自iOS6的ScreenShot(上图:Canvas,下图:原始图片)

有没有办法解决这个bug？这是一个错误吗？

如果我首先使用"PhotoWizard"应用程序(将其缩小到720px宽度)调整设备上的图像大小,Canvas会正确渲染它.使用相机应用程序拍摄的图像尺寸或图像似乎有问题:

• 工作演示脚本

来自Jake Archibald的尝试看起来好一点,但仍然可以垂直缩放:

• 修改过的演示脚本
• 来自iOS6的ScreenShot

我今天在安装了Android 4.1.1的Galaxy Nexus上试了一下.像预期的那样工作,所以这看起来像一个移动Safari问题:

• 来自Android 4.1.1的ScreenShot

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