Javascript can't get width of object image

Question

I have the following code

var inputLocalFont = document.getElementById("image-input");
    inputLocalFont.addEventListener("change",previewImages,false);
    function previewImages(){
        var fileList = this.files;
        var anyWindow = window.URL || window.webkitURL;

            for(var i = 0; i < fileList.length; i++){
              var objectUrl = anyWindow.createObjectURL(fileList[i]);                  
              $('.preview-area').append('<img class="resizeme" id="myImage" height="150" src="' + objectUrl + '" + title="' + fileList[i].name + ' ( ' + fileList[i] + ' "/>');
              window.URL.revokeObjectURL(fileList[i]);
            }
    }

i can get image name for title by this code

fileList[i].name

but when i try to add width and height in title image by adding this code

fileList[i].width
fileList[i].height

it's give "undefined" result

i already try using fileList[i].naturalWidth
and it's give same result

what I'm missing?

FLOW

i try to created a multiple image preview before user press submit and upload image to server...i want every preview image has tooltip title which contains (name, width, height)
i already success get name in tooltip by

fileList[i].name

is it possible to get width and height of image too in tooltip title?

ADD EVENT LISTENER INSIDE LOOP

var inputLocalImage = document.getElementById("image-input");
    inputLocalImage.addEventListener("change",previewImages,false);
    function previewImages(){
        var fileList = this.files;
        var anyWindow = window.URL || window.webkitURL;

            for(var i = 0; i < fileList.length; i++){
              var objectUrl = anyWindow.createObjectURL(fileList[i]);                  

              objectUrl.addEventListener("load", function() {
                alert('objectUrl.width');  
              })

              $('.preview-area').append('<img class="resizeme" id="myImage" height="150" src="' + objectUrl + '" + title="' + fileList[i].name + ' (s ' + fileList[i].clientWidth + ' "/>');
              window.URL.revokeObjectURL(fileList[i]);
            }
    }

I already try add event listener in
objectUrl / filename[i]

with property
.width
.naturalWidth
.clientWidth

What I'm missing?

HTML

<div class="row">
      <label for="image" class="control-label col-lg-3">Image<span class="required">*</span></label>
      <div class="col-lg-8">
         <input type="file" class="dimmy" id="image-input" multiple />
         <div class="preview-area"></div>
      </div>
</div>

preview-area class is my container for multiple image preview...i append it by this code

$('.preview-area').append('<img class="resizeme" id="myImage" height="150" src="' + objectUrl + '" + title="' + fileList[i].name + ' ( ' + fileList[i] + ' "/>');

Try searching first http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — Ace, Jun 19 '15 at 02:29
This is just speculation since you are not showing where you are trying to access the dimensions (please create **complete** examples), but I assume you are accessing them before the image loaded (I think even data URLs have to be "loaded"). — Felix Kling, Jun 19 '15 at 02:32
@FelixKling but i can get img name...if i can get img name doens't it mean image already loaded? i will try to update my question with flow..give me a few minutes — Surya Matadewa, Jun 19 '15 at 02:49
@wahwahwah yeah i used jquery too...so i don't mind solution by javascript or jquery — Surya Matadewa, Jun 19 '15 at 04:43

Keval Bhatt · Answer 1 · 2015-06-19T04:30:41.240

1

see this example: http://jsfiddle.net/kevalbhatt18/pjf3uffs/3/

Note :In this Example I don't have multiple image so i get width and height when we click on image

And for changing width use inputLocalFont.style.width = '500px';

And for getting Name of image :

var name = inputLocalFont.src;
var filename = name.split("/")[name.split("/").length-1];

var inputLocalFont = document.getElementById("image-input");
inputLocalFont.addEventListener("click", previewImages, false);

function previewImages() {

    var width = inputLocalFont.clientWidth;
    var height = inputLocalFont.clientHeight;
    var name = inputLocalFont.src;
    inputLocalFont.style.width = '500px';
    alert("width:" + width + "height:" + height)
    var filename = name.split("/")[name.split("/").length - 1];
    console.log(filename)
}

edited Jun 19 '15 at 04:30

answered Jun 19 '15 at 04:18

Keval Bhatt

6,224
2
24
40

hm actually "inputLocalFont" is var for browse button...so when it's change , then my script running previewImages function....i guess i must add event listenner load objectUrl / filename[i] in looping for but i can't figure how to do it – Surya Matadewa Jun 19 '15 at 04:42
1

@Neversaysblack so your picking image from system using browse file from option right if possible can you give us html also then i can help you – Keval Bhatt Jun 19 '15 at 05:39
please check my post again..hope it's clear enough...if not you can ask me again... – Surya Matadewa Jun 19 '15 at 05:57

score 0 · Answer 2 · answered Jun 19 '15 at 03:17

0

You need to use an eventListener for the "load" event of the image object, only then you will be able to get the image's width.

img.createEventListener("load", function() {
   alert(img.width);
})

answered Jun 19 '15 at 03:17

martinszy

143
1
6

i try to add event listener load before (objectUrl / filename[i] inside loop for)...but it's give result my script fail ( previewImage not show )...i will post what i tried before..can't you help fix it? – Surya Matadewa Jun 19 '15 at 04:47

Javascript can't get width of object image

2 Answers2