将图像文件从php传递到javascript

Question

I have a database in which there are images stored as LONGBLOB files. It seems I can't figure out how to "transport" those images to JS file so I could check their dimensions and compare them with the dimensions of the screen. Here is how I donwload the images:

function fillArrays(){
$idArray = array();
    $sql = "SELECT oglas_id,slika,prioriteta FROM deska WHERE deska.datumz <= CURRENT_DATE AND deska.datumk >= CURRENT_DATE;";
    $result = mysqli_query($GLOBALS['conn'],$sql);
    $resultCheck = mysqli_num_rows($result);
    if($resultCheck>0){
        while($row = mysqli_fetch_assoc($result)){
            array_push($GLOBALS['idArray'],$row['oglas_id']);
            $image = base64_encode($row['slika']);    // THIS        "slika" means "image" in my lang...
            array_push($GLOBALS['imgArray'],$image);        //AND THIS
            array_push($GLOBALS['prArray'],$row['prioriteta']);
        }
    }else{
        die("Oops there seems to be an error(arr)");
    }

}

I am preety sure everything in lines of SQL is correct. The problem begins when I try to get the images stored in array into javascript. I am trying to do it by json_encode.

<script>
        var idArray = <?php echo json_encode($idArray) ?>;
        var imgArray = <?php echo json_encode($imgArray) ?>;
        var prArray = <?php echo json_encode($prArray) ?>;
    </script>
    <script src="includes/script.js"></script>

Then we jump to my javascript file ( script.js ). Now when I try to output the dimensions of the image selected, it says undefined undefined (width*height). Here is how I try to obrain the info of the image selected. in my JS file:

var imgArray = window.imgArray;

var img = new Image();
img = imgArray[0];
img.width;
img.height;

I am aware the questions has been asked many times but I can't seem to wrap my head around it so I figured I would supply you guys with my concrete problem. Thanks to anyone who helps.

Since I dont think people fully understand:

Aim of the site:

• Download images from database.
• Resize them.(IMAGE CANNOT BE LARGER THAN HALF OF THE SCREEN SIZE)
• Place them in the 2x2 table.

Answer 1

You need to wait for the loaded image.

img.onload = function () {
  alert(this.width + ' ' + this.height);
};

Btw, if you need to resize the image, why don't you pass the screen resolution to PHP and then, there, you do all your checks? It's easier, because if you do this from JS, it depends on user browser.