Question

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

Demo Script

ScreenShot from iOS6 （上图：画布，下方：原始图片）

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

如果我首先使用“PhotoWizard”应用程序（将其缩小到720px宽度）调整设备上的图像，Canvas会正确渲染它。使用相机应用程序拍摄的图像尺寸或图像似乎存在问题：

Working Demo Script

尝试Jake Archibald的建议，看起来好一点，但仍然可以垂直缩放：

我今天在安装了Android 4.1.1的Galaxy Nexus上尝试过它。像预期的那样工作，所以这看起来像是一个移动Safari问题：

ScreenShot from Android 4.1.1

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函数。它会给出你期望的最终图像......

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

2 个答案: