javascript 移动 Safari 渲染 <img src="data:image/jpeg;base64..."> 在画布上缩放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12554947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Mobile Safari renders <img src="data:image/jpeg;base64..."> scaled on Canvas?
提问by André Fiedler
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.
我尝试在 iOS6 上的 Safari Mobile 上的 Canvas 上渲染加载了 FileReader 对象的本地图像。但是每个带有 data-URL 的图像都会垂直缩放。这是一个错误吗？在 Chrome 上它可以正确呈现。
ScreenShot from iOS6(above: Canvas, below: Original Image)
iOS6 截图（上图：画布，下图：原图）
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:
如果我首先使用“PhotoWizard”应用程序调整设备上的图像大小（将其缩小到 720px 宽度），Canvas 会正确呈现它。图像大小或使用相机应用程序拍摄的图像似乎有问题：
Tried suggestions from Jake Archibald, looks a bit better, but still gets vertically scaled:
尝试了Jake Archibald 的建议，看起来好一点，但仍然垂直缩放：
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:
我今天在安装了 Android 4.1.1 的 Galaxy Nexus 上进行了尝试。像预期的那样工作，所以这看起来真的是一个移动 Safari 问题：
回答by stomita
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.
这可能与 iOS Safari 资源限制中的限制有关。根据以下链接，超过 200 万像素的 JPEG 文件将被二次采样。
I'm doubting that canvas in Safari cannot deal with this subsampling correctly.
我怀疑 Safari 中的画布无法正确处理这种子采样。
I've created some workaround detecting whether the image is subsampled or not and stretching it to original size.
我创建了一些解决方法来检测图像是否被二次采样并将其拉伸到原始大小。
回答by user2208717
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); This function will fix the squeezing issue in iPod more than 3Mb. First if your image is more than 3Mb then calculate the scaled width and height for the image and set that width and height to the canvas. Then call the drawImage function. It will give the final image what you expected...
ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width, image.height); 此功能将解决 iPod 超过 3Mb 的挤压问题。首先，如果您的图像超过 3Mb，则计算图像的缩放宽度和高度，并将该宽度和高度设置为画布。然后调用 drawImage 函数。它会给最终图像你所期望的......
