在 Safari 中使用 HTML5 画布在 iOS 7 下的 iPhone 5C 上垂直挤压图像

Question

我开发了一个移动网络应用程序，它允许用户使用他们的移动设备相机拍照，然后将其显示在 HTML5 画布上。在 iOS 7 下的 iPhone 5C 上运行此 Web 应用程序时，图像在垂直方向上被严重挤压，因此它看起来失真并占据了大约 20% 的画布，而不是预期的 100%。

这可能与 Safari 图像二次采样有关，这也导致了早期版本的 iOS 和其他设备上的垂直挤压，尽管没有上述问题中看到的那么严重。创建了一个名为 megapix-image.js 的 jquery 插件来解决这个问题，它可以在运行 iOS 6 的 iPhone4 和 iPad 上纠正这种垂直挤压，使图像正确显示。 megapix-image.js 似乎与 iPhone 5/iOS 7 不兼容（它不会转换图像文件）。

需要注意的是，iOS 7 完全纠正了 iPhone 4 上出现的垂直挤压问题，但它显然使 iPhone 5/5C 上的问题更加严重。

这个问题有解决办法吗？

解决方案：

<script type="text/javascript" src="~/Scripts/megapix-image.js"></script> 
<script>

var mpImg = new MegaPixImage(file);
var mpImg.render(srcImage, {maxWidth: 960, maxHeight: 960});
</script>

file 是来自 fileInput 控件的文件，srcImage 是校正后的图像

Answer 1

我发现 megapixel-image.js 确实适用于 iPhone 5 和 iOS 7。我发现我错误地调用了一些参数。该插件纠正了垂直挤压问题。