移动Safari渲染 <img 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

Answer 2

var cnv = document.createElement("canvas");
        ctx = cnv.getContext("2d");

        image = new Image();

        image.src = src;

        image.onload = function() {

            var size = scaleSizeRatio(image.width,image.height);
            cnv.width = size[0];
            cnv.height = size[1];
            ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width , image.height);

            var div = container;  
            div.appendChild(cnv);       

        }

ctx.drawImage（image，0,0，image.width，image.height，0,0，image.width，image.height）; 此功能将解决iPod中挤压问题超过3Mb。 首先，如果您的图像大于3Mb，则计算图像的缩放宽度和高度，并将宽度和高度设置为画布。 然后调用drawImage函数。 它将给出你期望的最终图像......