8

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

iOS6 的屏幕截图（上图：画布，下图：原始图像）

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

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

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

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

4

2 回答 2

30

这可能与 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

于 2012-09-27T06:33:08.333 回答
0 
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); 此功能将修复超过 3Mb 的 iPod 中的挤压问题。首先，如果您的图像超过 3Mb，则计算图像的缩放宽度和高度，并将该宽度和高度设置为画布。然后调用drawImage函数。它将给出您所期望的最终图像......

于 2015-04-04T14:23:50.850 回答