XMLHttpRequest to get a php script loading a thumbnail image

**maen** · 11-21-2015, 07:44 PM

Hello @all,

first off: I'm a German php programmer with my first steps in javascript. So sorry if I make some mistakes in explaining.

My issue: the src is not filled:
In my html file I have the following code:

Code:

<script>
        ...
       function fillNavBar() {
       ...
            elImg.src = getThumbnail(strFileName,cx*dpr,cy*dpr);
       ...
      }

      function getThumbnail(filename,width,height){
          //return filename;
          
          var oImg = new XMLHttpRequest();
          
          oImg.responseType = "blob";
          oImg.onreadystatechange = function() {
            if (oImg.readyState == 4 && oImg.status == 200) {
                var blob = new Blob([oImg.response],{type:'image/jpeg'});
                var urlCreator = window.URL || window.webkitURL;
                var imageUrl = urlCreator.createObjectURL( blob );
                return imageUrl;
            }
          };
          oImg.open("GET","./panos/create_thumbnail.php?src=" + filename + "&width=" + width + "&height=" + height , true);  // `false` makes the request synchronous
          oImg.send();        
      }

To debug I use netbeans / chrome netbeans connector:
- The value of var blob is BLOB. Is this correct or the the first problem!???
- The value of var imageURL is "blob:http%3A//localhost%3A8383/5066ed81-2668-4ab7-9b60-be912cc4e20a".

The called php Skript sends an image to the browser. So do I have to strip the imageURL???

Thx in advance

maen

**josephm** · 11-22-2015, 02:36 AM

First, Is there any reason why you could not just do:

PHP Code:


elImg.src = "./panos/create_thumbnail.php?src=" + whatever;

instead of

elImg.src = getThumbnail(strFileName,cx*dpr,cy*dpr);

You can always resize the image using "elImg.width = whatever, elImg.height = whatever" or the mimetype and dimension could be returned by create_thumbnail.php.

in any case, if you are using synchronous (not recommended) request, then don't do oImg.onreadystatechange. Instead, just process the response after the send.

PHP Code:


oImg.open("GET","./panos/create_thumbnail.php?src=" + filename + "&width=" + width + "&height=" + height , true);

oImg.send(); 



 if (oImg.status == 200) {

    var blob = new Blob([oImg.response],{type:'image/jpeg'});

    var urlCreator = window.URL || window.webkitURL;

    var imageUrl = urlCreator.createObjectURL( blob );

    return imageUrl;

}

else {

    alert("response -> " oImg.status);

    return null;

With synchronous request, I am not sure if the returned status is in oImg.status.

**DaveyErwin** · 11-22-2015, 01:33 PM

getThumbnail does not return anything

do not 'return' from onreadystatechange
instead supply a function to
be called upon completion

Code:

getThumbnail(strFileName,cx*dpr,cy*dpr,fillNavBar);


       function fillNavBar(arg) {
       ...
            elImg.src = arg;
       ...
      }


      function getThumbnail(filename,width,height,cFunc){
          //return filename;
          
          var oImg = new XMLHttpRequest();
          
          oImg.responseType = "blob";
          oImg.onreadystatechange = function() {
            if (oImg.readyState == 4 && oImg.status == 200) {
                var blob = new Blob([oImg.response],{type:'image/jpeg'});
                var urlCreator = window.URL || window.webkitURL;
                var imageUrl = urlCreator.createObjectURL( blob );
                cFunc( imageUrl );
            }
          };
          oImg.open("GET","./panos/create_thumbnail.php?src=" + filename + "&width=" + width + "&height=" + height , true);  // `false` makes the request synchronous
          oImg.send();        
      }

blob and URL are native in Microsoft Edge
but are not available in Internet Explorer

Thread: XMLHttpRequest to get a php script loading a thumbnail image

Thread Tools

Rate This Thread

XMLHttpRequest to get a php script loading a thumbnail image

Tags for this Thread

Posting Permissions