Images to Blob & Images to Base64 Angular Directive: Demo https://jsfiddle.net/onigetoc/k8u8v1Lm/

demo.html

<img src="http://uploads.textchange.ca/avatars/blank_user_icon.jpg" img-base64="https://lh3.googleusercontent.com/-faoV4RDuIHw/AAAAAAAAAAI/AAAAAAAAAuY/wOVIImXv2CQ/photo.jpg?sz=50" />
<img src="http://uploads.textchange.ca/avatars/blank_user_icon.jpg" img-blob="https://www.gravatar.com/avatar/e53a2d1c4d1174acaa0edb5898e533e9/?default=&s=80" />
<img src="http://uploads.textchange.ca/avatars/blank_user_icon.jpg" img-blob="https://www.brokenurlnothing.com/nothing.jpg" />

imgToBlobToBase64.js

var myApp = angular.module('myApp', []);

myApp.directive('imgBase64', function() {
  return {
    scope: {
      img64: '@imgBase64'
    },
    link: function(scope, element, attrs) {
      imgToBase64(scope.img64, attrs);
    }
  }

});

myApp.directive('imgBlob', function() {
  return {
    scope: {
      imgblob: '@imgBlob'
    },
    link: function(scope, element, attrs) {
      imgToBlob(scope.imgblob, attrs);
    }
  }

});

/* IMAGE TO BASE64 */
function imgToBase64(url, attrs) {
  var xhr = new XMLHttpRequest();

  xhr.responseType = "arraybuffer";
  xhr.open("GET", url);

  xhr.onload = function() {
  
  if (this.status != 200) return;

    var base64, binary, bytes, mediaType;

    bytes = new Uint8Array(xhr.response);
    //NOTE String.fromCharCode.apply(String, ...
    //may cause "Maximum call stack size exceeded"
    binary = [].map.call(bytes, function(byte) {
      return String.fromCharCode(byte);
    }).join('');
    mediaType = xhr.getResponseHeader('content-type');
    base64 = [
      'data:',
      mediaType ? mediaType + ';' : '',
      'base64,',
      btoa(binary)
    ].join('');

    console.log(base64)
    //change picture SRC
    attrs.$set('src', base64);
    //return base64;

  };
  xhr.onerror = onError;
  xhr.send();
} 
// end function imgToBase64


/* IMAGE TO BLOB */
function imgToBlob(url, attrs) {

  var xhr = new XMLHttpRequest();

  // Use JSFiddle logo as a sample image to avoid complicating
  // this example with cross-domain issues.
  xhr.open("GET", url, true);

  // Ask for the result as an ArrayBuffer.
  xhr.responseType = "arraybuffer";

  xhr.onload = function(e) {
  
  if (this.status != 200) return;
    // Obtain a blob: URL for the image data.
    var arrayBufferView = new Uint8Array(this.response);
    var blob = new Blob([arrayBufferView], {
      type: "image/jpeg"
    });
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(blob);

    attrs.$set('src', imageUrl);
    //img.src = imageUrl;
    //urlCreator.revokeObjectURL(imageUrl);
  };
  xhr.onerror = onError;
  xhr.send();
} 
// end function imgToBlob


function onError() {
  console.log('error');
}