It is possible to set size of images in imagearray of javascript?

Question

Hi,

It is possible to set height and width of images in imagearray of javascript?

imagearray: [
     ["http://i26.tinypic.com/11l7ls0.jpg", "", "", "My Text"],
     ["http://i29.tinypic.com/xp3hns.jpg", "", "", "My Text"],
     ["http://i30.tinypic.com/531q3n.jpg"],
     ["http://i31.tinypic.com/119w28m.jpg", "", "", "My Text"] 
],

Here images are in different height and width.
I wand to set image height and width in constant size (example:400*400)

Answer 1

I don't think trying to solve this in javascript is the correct approach. You don't actually have any images in your array, you have URLs. If you hope to manipulate the images with javascript then you're going to have to fetch the images and turn them into data you can actually work with. This is possible, but it'll be a lot of work as there aren't any built in image processing primitives in javascript.

A better approach may be to get the images into the HTML of your page and then rely on the browser itself to do the work for you. Insert the image element into your page and specify the width and the height and the browser will scale the image for you:

var elImage = document.createElement("img");
elImage.src = "http://i26.tinypic.com/11l7ls0.jpg";
elImage.height = 400;
elImage.width = 400;
elImage.alt = "";
document.getElementById("myImageContainer").appendChild(elImage);

The above assumes you've got a div with id myImageContainer to stick the images in. It could easily be adapted to sit in a loop where you add each image from your array to the page in turn. However, if this is all you're doing, you might as well just stick the image in to your HTML rather than messing around with javascript:

<img src="http://i26.tinypic.com/11l7ls0.jpg" height="400" width="400" alt="" />

The main problem with this approach (either scripting or straight to HTML) is that it doesn't preserve aspect ratio, so your images may looked squashed. If you want to avoid this then you probably do want to use javascript: load the image into your page, detect its 'natural' height and width, then either use simple arithmetic to scale to something that will fit within both the width and height, or scale so that at least one is and display the image inside a div with a fixed width and height and a style of overflow: hidden to crop.