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

问题描述

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

• 演示脚本

iOS6 截图(上图:Canvas，下图: 原图)

有什么办法可以解决这个错误?这是一个错误吗?

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

• 工作演示脚本

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

• 修改后的演示脚本
• iOS6 截图

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

• Android 4.1 的屏幕截图.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 中的画布无法正确处理这种二次采样.

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

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

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

解决方案

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.

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

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.

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

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