encode an image with js or using jquery

Question

I am new in computer science. I see somewhere that devloper use something this for in image tag data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2..../AI7/AP/Z.

So my question is how can i do when an user upload an image and that can change in this type of code data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAAQABAAD/2..../AI7/AP/Z using js or jquery framwork. and print on browser after loaded. Do i have to use any function ? do i have to use any specific tag like canvas or svg ?

score 1 · Answer 1 · edited May 23 '17 at 12:15

The string you are trying to get is base64 representation of the image. Any file or file can be converted to base64.

Read more about base64 at here : https://en.wikipedia.org/wiki/Base64

And as for converting an image to base64, that is already answered at here : How to convert image into base64 string using javascript

And also, that is not an usual requirement. Usually, some server-side language like PHP is used to do that.

score 0 · Answer 2 · answered Nov 23 '15 at 21:05

I Find out how can is possible this Here is small demo...

$(document).ready(function() {
  function readImage() {
    if (this.files && this.files[0]) {
      var base24 = new FileReader();
      base24.onload = function(e) {
        $('#encoded').text(e.target.result);
      };
      base24.readAsDataURL(this.files[0]);
    }
  }

  $("#myimage").change(readImage);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='file' id="myimage" />
<div id="encoded"></div>

encode an image with js or using jquery

2 Answers2