Menu
I have an HTML test page for this issue here. For some reason MobileSafari is reporting the Image.width/height properties of any image with more than 1700 pixels as half its value. That is, the width property of the JPG is, say, 2000 but MobileSafari JavaScript reports it as 1000. If I try the same code with a 1700px-wide image I get the correct width.
The test I did loads two images (same image in different dimensions) and displays the JavaScript size values. I tried in:
Any ideas why this is happening? Am I missing a setting somewhere? Why does it work with some images but not others?
The test is here: http://still-island-1941.herokuapp.com/sizetest.html
This is the JavaScript code:
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;
}
This is the HTML code:
<!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>
503
If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.
In plain JavaScript, you can directly modify the CSS width and height property of the image. The following example demonstrates this by altering the CSS width property by specifying the absolute value in pixels and leave the browser to calculate the corresponding height while maintaining the aspect ratio.
Answer: Use the JavaScript clientWidth property You can simply use the JavaScript clientWidth property to get the current width and height of an image. This property will round the value to an integer.
Yes, it exists a limitation in size and weight.
Because of the memory available on iOS, there are limits on the number of resources it can process:
The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image :
The maximum decoded image size for JPEG is 32 megapixels using subsampling. JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. The height and width of a canvas object is 150 x 300 pixels if not specified.
Some links which could help :
Cheers
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
