JQuery get image data? Is this blob?

Question

I'm editing an existing system to pass an image from the server file system to an api.

I get the image data like so:

$.get("image.png", function(data) {
   document.write(data)
});

The result is something like this:

�PNG IHDR��}Ծ�sRGB���bKGD������� pHYs��tIME�߯,� IDATx���}��kv��;1�R;Z����HMm��3sNf��

Probably a stupid question, but is this blob data? Or can this be used to reconstruct an image? Or is there a better way to get blob or binary data?

Answer 1

It took a while but I found a suitable solution here for a base64 encode the image. I can also send the data over HTTP to my server to reconstruct the image.

http://theshravan.net/blog/get-image-data-url-using-javascript/

  var image = new Image();

  // create an empty canvas element
  var canvas = document.createElement("canvas"),
      canvasContext = canvas.getContext("2d");

  image.onload = function () {

    //Set canvas size is same as the picture
    canvas.width = image.width;
    canvas.height = image.height;

    // draw image into canvas element
    canvasContext.drawImage(image, 0, 0, image.width, image.height);

    // get canvas contents as a data URL (returns png format by default)
    var dataURL = canvas.toDataURL();

    //document.write(dataURL);
    console.log(dataURL);
  };

  image.src = "image.png";