Color Thief using XHR Images

Methods for loading Images using XHR CORS and passing them to Color Thief to get the dominated colors

by Cristiano Oliveira

HTML

<script src="https://rawgit.com/lokesh/color-thief/master/dist/color-thief.min.js"></script>

JavaScript

// Color Thief using XHR Images;
// Methods for loading Images using XHR CORS 
// and passing them to Color Thief to get the dominated colors,
// check your console log


// Using img crossOrigin attribute (Chrome/Firefox) (Not supported in all browsers):
(function(){ 
var img = document.createElement('img');
img.crossOrigin = 'Anonymous';
img.onload = function () {
   var colorThief = new ColorThief();
   var color = colorThief.getColor(img);
   console.log('rgb('+color+')')
};
img.src = 'http://home.kpn.nl/persson/foto_a_schepen-map/Oranje_2/de-Oranje.JPG';
})();


// Using XHR2 with responseType="blob" and FileReader()
// (Modern browsers/IE10+)

(function(){ 
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onload = function() {
  var reader = new FileReader();
  reader.onload = function() {
    var img = document.createElement('img');
    img.onload = function() {
      var colorThief = new ColorThief();
      var color = colorThief.getColor(img);
      console.log('rgb('+color+')')
    }
    img.src = reader.result;
  }
  reader.readAsDataURL(xhr.response);
};
xhr.open('GET', 'http://home.kpn.nl/persson/foto_a_schepen-map/Oranje_2/de-Oranje.JPG');
xhr.send();
})();

// Using XHR2 with responseType="blob" and createObjectURL()
// (Modern browsers/IE10+)
(function(){ 
var xhr = new XMLHttpRequest();
xhr.responseType = "blob";
xhr.onload = function () {
     window.URL = window.URL || window.webkitURL; // support for Safari/old Chrome
     var img = document.createElement('img');
     img.src = window.URL.createObjectURL(xhr.response);
     img.onload = function() {
        var colorThief = new ColorThief();
        var color = colorThief.getColor(img);
        console.log('rgb('+color+')')
      }
}
xhr.open('GET', 'http://home.kpn.nl/persson/foto_a_schepen-map/Oranje_2/de-Oranje.JPG');
xhr.send();
})();

// Using XHR2 with responseType="arraybuffer" and Blob()
// with fixed content type. (Modern browsers/IE10+)

(function(){
var xhr = new...