mga*_*mga 6 javascript image mobile-safari
我在这里有一个关于这个问题的HTML 测试页面.出于某种原因,MobileSafari报告Image.width/height任何超过1700像素的图像的属性为其值的一半.也就是说,widthJPG 的属性是2000,但MobileSafari JavaScript将其报告为1000.如果我尝试使用1700px宽图像的相同代码,我得到正确的宽度.
我做的测试加载了两个图像(不同维度的相同图像)并显示JavaScript大小值.我试过:
任何想法为什么会这样?我错过了某个地方的设置吗?为什么它适用于某些图像而不适用于其他图像?
测试在这里:http://still-island-1941.herokuapp.com/sizetest.html
这是JavaScript代码:
var imgBig, imgSmall;
function init() {
imgBig = new Image();
imgBig.onload = handleBig;
imgBig.src = "/images/size.jpg";
imgSmall = new Image();
imgSmall.onload = handleSmall;
imgSmall.src = "/images/test1.jpg";
document.getElementById("browser").innerHTML = navigator.userAgent;
}
function handleBig() {
document.getElementById("dimensionsBig").innerHTML = imgBig.width + "x" + imgBig.height;
document.getElementById("testBig").src = imgBig.src;
}
function handleSmall() {
document.getElementById("dimensionsSmall").innerHTML = imgSmall.width + "x" + imgSmall.height;
document.getElementById("testSmall").src = imgSmall.src;
}
Run Code Online (Sandbox Code Playgroud)
这是HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MobileSafari image dimensions test</title>
</head>
<body onload="init()">
<p>your browser: <strong><span id="browser"></span></strong></p>
<p>big image dimensions: <strong><span id="dimensionsSmall"></span></strong> (should be 1700x1134)</p>
<img id="testSmall" />
<p>small image dimensions: <strong><span id="dimensionsBig"></span></strong> (should be 2000x1334)</p>
<img id="testBig" />
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
是的,它在尺寸和重量方面存在限制.
由于iOS上可用的内存,它可以处理的资源数量有限:
对于RAM小于256 MB的设备,解码的 GIF,PNG和TIFF图像的最大尺寸为3百万像素,对于RAM大于或等于256 MB的设备,最大尺寸为5百万像素.也就是说,对于RAM小于256 MB的设备,请确保宽度*高度≤3*1024*1024.请注意,解码后的大小远远大于图像的编码大小:
使用子采样,JPEG 的最大解码图像尺寸为3200万像素.由于子采样,JPEG图像可以达到3200万像素,这使得JPEG图像可以解码为像素数量的十六分之一.大于2百万像素的JPEG图像被二次采样 - 即,解码为缩小的尺寸.JPEG子采样允许用户查看来自最新数码相机的图像.
对于RAM小于256 MB的设备,画布元素的最大大小为3百万像素,对于RAM大于或等于256 MB的设备,最大大小为5百万像素.如果未指定,画布对象的高度和宽度为150 x 300像素.
一些可能有用的链接:
干杯