We Keep Coding

IE cannot get size of image in xml+svg format? [duplicate]

It works fine everywhere but not in IE 11 (I have not tested other IE versions yet).
var img = new Image();
img.onload = function(){
alert( 'img: ' + img.width + 'x' + img.height +
' natural: ' + img.naturalWidth + 'x' + img.naturalHeight );
};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';
JSFiddle:
JSFiddle
Result:
img: 121x30 natural: 121x30 - Real browsers (Chrome, Safari, Firefox, ...)
img: 0x0 natural: 0x0 - IE 11
There is a similar question here: Getting image width on image load fails on IE
None of the solutions from those answers work for svg.
Is there a way to get the width and height of a svg file loaded with Image() in Internet Explorer 11?
Note: I am looking for a solution without having to add the element to the DOM for measuring, as I want to avoid any unnecessary re-flow/repaint.

This code works in IE11:
var img = new Image();
img.onload = function(){
document.body.appendChild(this);
alert( 'img: ' + this.offsetWidth + 'x' + this.offsetHeight);
document.body.removeChild(this);
};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';
And yes - this solution is not ideal.

Well, I don't think you can access the SVG content if it is loaded as a src attribute, and not inline.
One solution might be to change the way the SVG is loaded, so perhaps load via AJAX, and then append to the document by another means. This gives you a chance to have full access the the SVG source before adding to the document...
/* use ajax (and in this example jQuery) to get SVG as XML */
$.get('http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg', function(svgxml){
/* now with access to the source of the SVG, lookup the values you want... */
var attrs = svgxml.documentElement.attributes;
alert( 'img: ' + attrs.width.value + 'x' + attrs.height.value );
/* do something with the svg, like add it to the document for example... */
$(document.body).append(document.importNode(svgxml.documentElement,true));
}, "xml");
JSFiddle
This example has used jQuery, and loads the content of the SVG as xml, but you could do it in many ways following the same principle, for example loading as text string, and accessing with regular jQuery methods, or without jQuery at all.
The moral of the story, is that if you load it via AJAX, you can get a reference to the content of the SVG and have more control over it before it gets added to the page.

In html5 standard:
The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available. LINK
If img not rendered then IE reserves the right to display 0. And it seems he is doing this.
With .naturalWidth and .naturalHeight similar situation.

How can I get width and height of SVG on Image.load in IE 11

It works fine everywhere but not in IE 11 (I have not tested other IE versions yet).
var img = new Image();
img.onload = function(){
alert( 'img: ' + img.width + 'x' + img.height +
' natural: ' + img.naturalWidth + 'x' + img.naturalHeight );
};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';
JSFiddle:
JSFiddle
Result:
img: 121x30 natural: 121x30 - Real browsers (Chrome, Safari, Firefox, ...)
img: 0x0 natural: 0x0 - IE 11
There is a similar question here: Getting image width on image load fails on IE
None of the solutions from those answers work for svg.
Is there a way to get the width and height of a svg file loaded with Image() in Internet Explorer 11?
Note: I am looking for a solution without having to add the element to the DOM for measuring, as I want to avoid any unnecessary re-flow/repaint.

This code works in IE11:
var img = new Image();
img.onload = function(){
document.body.appendChild(this);
alert( 'img: ' + this.offsetWidth + 'x' + this.offsetHeight);
document.body.removeChild(this);
};
img.src = 'http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg';
And yes - this solution is not ideal.

Well, I don't think you can access the SVG content if it is loaded as a src attribute, and not inline.
One solution might be to change the way the SVG is loaded, so perhaps load via AJAX, and then append to the document by another means. This gives you a chance to have full access the the SVG source before adding to the document...
/* use ajax (and in this example jQuery) to get SVG as XML */
$.get('http://upload.wikimedia.org/wikipedia/en/b/b5/Boeing-Logo.svg', function(svgxml){
/* now with access to the source of the SVG, lookup the values you want... */
var attrs = svgxml.documentElement.attributes;
alert( 'img: ' + attrs.width.value + 'x' + attrs.height.value );
/* do something with the svg, like add it to the document for example... */
$(document.body).append(document.importNode(svgxml.documentElement,true));
}, "xml");
JSFiddle
This example has used jQuery, and loads the content of the SVG as xml, but you could do it in many ways following the same principle, for example loading as text string, and accessing with regular jQuery methods, or without jQuery at all.
The moral of the story, is that if you load it via AJAX, you can get a reference to the content of the SVG and have more control over it before it gets added to the page.

In html5 standard:
The IDL attributes width and height must return the rendered width and height of the image, in CSS pixels, if the image is being rendered, and is being rendered to a visual medium; or else the intrinsic width and height of the image, in CSS pixels, if the image is available but not being rendered to a visual medium; or else 0, if the image is not available. LINK
If img not rendered then IE reserves the right to display 0. And it seems he is doing this.
With .naturalWidth and .naturalHeight similar situation.

How can I change the size of an image without cropping?

I have an image source:
var _img = <img src="../images/yadayada.jpg">
And I want it enlarge it or shrink it without cropping it, but I'd rather not grab the element after and change the css.
I tried:
_img.height = 200;
and
_img.style.height = 200
But the first crops it, and the second does nothing.

Style values need units so the style setting would be like this:
_img.style.height = "200px";
This will change the scaled size of the image. If you only set just the height or just the width, then the other should scale to maintain the aspect ratio. You will have to make sure that the HTML layout the image is positioned in is flexible and can handle the image changing size.
Image resize demo: http://jsfiddle.net/jfriend00/K8GJQ/

It's a little hard to tell if you're trying to change an existing image or set dimensions for a new image you're trying to create...
The statement var _img = <img src="../images/yadayada.jpg"> won't do anything by itself except cause your JS to fail to load (it's just a string, and is missing surrounding quotes and semicolon).
If you're trying to target an image that's already in the HTML, give its <img> tag a unique ID that you can target, and then set the width or height.
In the HTML: <img id="yadayadaImage">
In the JS:
var myImage = document.getElementById('yadayadaImage');
myImage.style.width = "200px";
Setting only style.width OR style.height here should keep the image from being cropped, since the other dimension should expand automatically. If it's still cropped check the parent element's width & height attributes, because that may be what's restricting the size.
.
If you're actually trying to create a new image w/specific source and dimensions, what you had above won't work. You need to create a new<img> element with those attributes, then append it to the document.
var targetDiv = document.getElementById("myPhotoDiv");
var imgTag = document.createElement('img');
imgTag.id = "yadayadaImage";
imgTag.className = "uncroppedImage";
imgTag.src = "../images/yadayada.jpeg";
//you COULD set height & width properties here, but that's what CSS is for.
imgTag.style.width = "200px";
targetDiv.appendChild(imgTag); //add the new img to the page
The best approach, but which you said you didn't want to do, is to use CSS and create a class that you can reuse for other images where you don't necessarily know the specific width or height.
.uncroppedImage{
width:100%;
}

Better setup an id for your image like this
<img id="myImg" src="../images/yadayada.jpg">
and use the script below
var myImg = document.getElementById('myImg');
if(myImg && myImg.style) {
myImg.style.height = '200px';
}

Resizing background images

This is really for informational and learning purposes while learning more about JavaScript and CSS. I have a local browser index page that I wanted to rotate the background image onload. After looking around and playing with different solutions, I settled on this for the basic rotate functionality:
<html>
<head>
<script language="javascript" type="text/javascript">
function rotate()
{
var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var img = imgArray[aImg];
document.body.style.background = "url(" + img + ") no-repeat";
document.body.style.backgroundSize = "cover";
}
</script>
</head>
<body onload="rotate()">
</body>
</html>
During the process, before I just set the backgroundSizeas cover to fill the window, I was playing with the idea of resizing the images before setting them as the background image after they are selected from the array.
I have done a lot of searching, and the only real working solutions I have found rely on selecting the element by ID, but that also requires that the image has an ID associated, such as in the IMG property in the HTML code. Here the image is selected and set in the JavaScript with CSS.
I have tried setting the image dimensions with img.width / img.height and img.style.width / img.style.height, as well as a few other random solutions I have come across, but whenever I try to change these the image either does not change or it does not show at all.
function rotate()
{
var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var img = imgArray[aImg];
image = rsize(img);
document.body.style.background = "url(" + image + ") no-repeat";
document.body.style.backgroundSize = "cover";
}
function rsize(image)
{
image.style.width = "300px";
image.style.height = "300px";
return image;
}
I know I am probably doing something wrong here. Is there a way, in this circumstance, that I can resize these images? Or is there a better way to construct this?
Thanks in advance.

You must set image.style.width and image.style.height on an actual image DOM object, not on the URL as you are currently trying to do.
As an image object is not used for background images, you can't really directly do what you're trying to do for a background image.
You could use the CSS background-size property, but that is fairly new and is not supported in versions of IE prior to IE9. If you were using that, you would set the actual size for that, not "cover".
You could also use an actual DOM image and then present that DOM image as centered in your page if that's what you're really trying to do.
For example, here's how you create a DOM image object, assign it a URL, set it's size and insert it into your page:
var imgArray = new Array("img1.jpg", "img2.jpg", "img3.jpg");
var aImg = Math.floor(Math.random()*imgArray.length);
var imgURL = imgArray[aImg];
var img = new Image();
img.src = imgURL;
img.style.width = "300px";
img.style.height = "300px";
img.id = "centeredImage";
document.body.appendChild(img);
You could then use CSS to position is in the center of your page if you wanted.
Working demo here: http://jsfiddle.net/jfriend00/jqMtV/

No, you have no <img> elements you could (re)size (btw, they would not need ids to be selectable). Your use of rsize(imgArray[aImg]) operates on the array members, which are strings and not DOM elements, so setting values on their non-existent style property would throw an error.
Yet, you're already on the right way with using the backgroundSize style property. Just don't set it to cover, but to the size you need!
document.body.style.backgroundSize = "300px 300px";
If you would want to use a <img> element, add this at the end of your <body>:
<img src="some.jpg" style="position:fixed; z-index:-1; width:100%; height:100%" />

remote image properties using jquery

Currently i am trying to get remote image width/height. I am developing a link sharing module something like when you paste a link on facebook, you can see title, description and images.
So i tried using php getimagesize to get image width/height its very slow.
So i am thinking of using jquery solution to get remote image width/height so that i can filter image width less then 100px.
I am new in jquery/javascript
I tried something like
var img = $('#imageID');
var width = img.clientWidth;
var height = img.clientHeight;
$('#info').html(width+'.. height: '+height);
Its not working and return undefined .. height: undefined
Any help is appreciated.
Thank you

Try this:
var img = new Image();
img.src = 'http://your.url.here/image.png';
img.onload = function() {
$('#info').text('height: ' + img.height + ' width: ' + img.width);
};
This approach would let you get the image info without having to have an <img> tag at all. Now, perhaps you want the image to be on the page, so you'd do what #patrick suggests in that case.

If you're trying to get the width and height of the image in the client side, you can use jQuery's .width() and .height() methods.
Example: http://jsfiddle.net/aeBWQ/
$(window).load(function() {
var img = $('#imageID');
var width = img.width();
var height = img.height();
$('#info').html(width+'.. height: '+height);
});
Doing $(window).load() will ensure that the images are loaded before getting the height/width.