语言

Menu
Sites
Language
How to read the contents of an Image file in Web app

Hi All,

 I am trying to read the contents of a ".png" file using the following code snippet in index.html :

 

 <script>

function readImageFile() {
 var files = "./css/launcher.png";
  var reader = new FileReader();
  console.log("readImageFile" + files );
  
   reader.onload =  function(e) 
                    { 
                        var img = document.createElement("img");
                        img.width=200;
                        img.src = e.target.result; 
                         console.log("e.target.result" + e.target.result );

                        /* Set the selected image's dataURL */     
                        img.title = escape(files.name);
                        img.className = "img";
                        
                          console.log("img.title" + e.target.result );

                        document.getElementById("dispImag").appendChild(img);
                    };
         
                    reader.readAsDataURL(files);
                     console.log("after readAsDataURL"   );
}

</script>

<body>

        <div class="ui-content content-padding" id = "dispImag">

<button id = "butReadFile" onclick=readImageFile() > </button>

</div>

</body>

    But, the event listener  "reader.onload =  function(e)" never gets called. I am not sure if I am missing anything here. Appreciate if any one can help me to fix this issue.

Thanks & Regards

        Vikram

 

响应

2 回复
AVSukhov

Hello,

readAsDataURL(Blob blob);

This method to read File objects or Blob objects into memory. You need to get File object using W3C File API or Device Filesystem API.

AVSukhov

Update: readAsDataURL(Blob blob) method