Friday 7 November 2014

How to read image Using Jquery & Html5

Posted by Shiva on 09:36 in , | No comments
How to read image  using jquery & html5

File reader API is used to read a file from your local hard drive

We can find Atricle  about File reader


DEMO



 HTML PART :

<input id="imageread" type="file" />
<canvas id="img"></canvas>


Jquery Code :

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">  $('input').change(function() {     var readimg = new FileReader;     readimg.onload = function() {         var img = new Image;         img.onload = function() {             var c=document.getElementById("img");             var ctx=c.getContext("2d");             ctx.drawImage(img,0,0,200,180);                 }         img.src = readimg.result;                 };      readimg.readAsDataURL(this.files[0]);    }); </script>

0 comments:

Post a Comment