移动Safari会再现< img src =" data：image / jpeg; base64 ...">在Canvas上缩放？ [英] Mobile Safari renders <img src="data:image/jpeg;base64..."> scaled on Canvas?

问题描述

我尝试在iOS6上的Safari Mobile上的Canvas上渲染一个用FileReader对象加载的本地图像。但每个具有data-URL的图像都会垂直缩放。这是一个错误？在Chrome上正确显示。

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

从iOS6的截图 （以上：帆布，下面：原始影像）

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

有任何方式来解决这个bug？这是一个错误吗？

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

如果我首先使用PhotoWizard应用程序调整图像大小（缩小到720像素宽度），Canvas会正确显示。似乎是图片大小或使用相机应用拍摄的图片的问题：

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:

• 修改的演示脚本


• 截图从iOS6的

• Modified Demo Script
• ScreenShot from iOS6

我今天试过安装了Android 4.1.1的Galaxy Nexus。工作原理如预期，所以这看起来像一个移动Safari问题：

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:

• 在Android 4.1.1截图

• ScreenShot from Android 4.1.1

推荐答案

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

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.

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

我怀疑在Safari中的画布上不能与此子采样处理正确。

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.

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

这篇关于移动Safari会再现< img src =" data：image / jpeg; base64 ...">在Canvas上缩放？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！