title: render an image binary data into a img or canvas tag
body: <p>I have a route which I use to request images, something like this:</p>
  
  <pre><code>/api/image
  </code></pre>
  
  <p>it returns the body the file data, something like: </p>
  
  <pre><code>����JFIF��C��C��� ��    
  �����+�}Yϭ�F39M&gt;���������&gt;���;��ˋ��uXʽ�w�ڤx\-[2g��k�S���H���m
  [�V?[_W����#��v��}6�[��F�F�%����n�...
  </code></pre>
  
  <p>what I'm trying to do is something like this:</p>
  
  <pre><code>&lt;canvas&gt;
  </code></pre>
  
  <p>then i did this:</p>
  
  <p>code:</p>
  
  <pre><code>var canvas = $('canvas');
  var blob = new Blob([file], {type: 'image/png'});
  var url = URL.createObjectURL(blob);
  var img = new Image;
  var ctx = canvas.getContext('2d');
  
  $(img).on('load',function(event) {
     ctx.drawImage(img, 0, 0);
     URL.revokeObjectURL(url);
  }).each(function(){
       if(this.complete) { $(this).load() }
  });
  img.src = url;
  </code></pre>
  
  <p>I also appended the file directly to the image source attribute like:</p>
  
  <p>img.src = 'data:image/png;base64,' + file</p>
  
  <p>but it didn't work</p>
  
  <p>What I get is that the <strong>resource is not found</strong> and it throws a <strong>404</strong> error:</p>
  
  <pre><code>&gt; GET blob:http://localhost:3000/2a86de11-b565-4578-8ec1-2c20cbdae739 404 (Not Found)
  </code></pre>
  
  <p>I'm a bit confused, what am I doing wrong? </p>
  
  <p>edit: i just did this:</p>
  
  <pre><code>var blob = new Blob([file], {type: 'image/png'});
  var reader = new FileReader();
  
  reader.onload = function (e) {
    suggestion.img.attr('src', e.target.result);
  };
  reader.readAsDataURL(blob);
  </code></pre>
  
  <p>but it doesnt show the image either</p>