using HTML5 File API with elevate zoom jquery plugin

Question

I'm trying to use elevate zoom jquery plugin on an image created with the file api right off the user's computer. However it doesn't seem to work! It's as if elevate zoom doesn't recognize the "src" of the image.

Any ideas?

Thanks a lot!

Here's my JS:

$("#testing").change(function(e) {
  var file, i, image_width, img, reader, _results;
  i = 0;
  image_width = void 0;
  _results = [];
  while (i < e.originalEvent.srcElement.files.length) {
    file = e.originalEvent.srcElement.files[i];
    img = document.createElement("img");
    img.id = "draggable";
    reader = new FileReader();
    reader.onloadend = function() {
      var image_h, image_w;
      img.src = reader.result;
    };
    reader.readAsDataURL(file);
    $("#preview_images").after(img);
    _results.push(i++);
  }
  return _results;
});

$(function() {
  $("img").elevateZoom({
    zoomType: "inner"
  });
  return {
    cursor: "crosshair"
  };
});

Here's my HTML:

<img src="data:image/jpeg;base64,/{HUGE LINES OF CODE HERE}">

Answer 1

reader.result is base64 string of image,so try this

reader.onloadend = function() {
  var image_h, image_w;
  img.src = 'data:image/png;base64,'+reader.result;
};