{"action":"created","issue":{"url":"https://api.github.com/repos/lokesh/color-thief/issues/86","labels_url":"https://api.github.com/repos/lokesh/color-thief/issues/86/labels{/name}","comments_url":"https://api.github.com/repos/lokesh/color-thief/issues/86/comments","events_url":"https://api.github.com/repos/lokesh/color-thief/issues/86/events","html_url":"https://github.com/lokesh/color-thief/issues/86","id":113403680,"number":86,"title":"Use ColorThief with XMLHttpRequest and without canvas","user":{"login":"loretoparisi","id":163333,"avatar_url":"https://avatars.githubusercontent.com/u/163333?v=3","gravatar_id":"","url":"https://api.github.com/users/loretoparisi","html_url":"https://github.com/loretoparisi","followers_url":"https://api.github.com/users/loretoparisi/followers","following_url":"https://api.github.com/users/loretoparisi/following{/other_user}","gists_url":"https://api.github.com/users/loretoparisi/gists{/gist_id}","starred_url":"https://api.github.com/users/loretoparisi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/loretoparisi/subscriptions","organizations_url":"https://api.github.com/users/loretoparisi/orgs","repos_url":"https://api.github.com/users/loretoparisi/repos","events_url":"https://api.github.com/users/loretoparisi/events{/privacy}","received_events_url":"https://api.github.com/users/loretoparisi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":9,"created_at":"2015-10-26T17:07:47Z","updated_at":"2015-12-09T11:11:32Z","closed_at":null,"body":"I'm trying to use Color-Thief without making use of the ```<canvas/>``` element.\r\n\r\nSo, given a image url, width and height I have tried this\r\n\r\n```javascript\r\nfunction getColorsNoCanvas(imageURL, imageHeight, imageWidth, done, error) {\r\n\r\n  console.log(imageURL,imageHeight,imageWidth)\r\n\r\n  var xhr = new XMLHttpRequest();\r\n  xhr.open('GET', imageURL, true);\r\n  xhr.responseType = 'arraybuffer';\r\n  xhr.onload = function(e) {\r\n    if (this.status == 200) {\r\n      var uInt8Array = new Uint8Array(this.response);\r\n      var i = uInt8Array.length;\r\n      var biStr = new Array(i);\r\n      while (i--)\r\n      { biStr[i] = String.fromCharCode(uInt8Array[i]);\r\n      }\r\n      //var data = biStr.join('');\r\n      //var base64 = window.btoa(data);\r\n      //$(\"#myImage\").attr(\"src\", \"data:image/jpeg;base64,\"+base64);\r\n\r\n      // Store the RGB values in an array format suitable for quantize function\r\n      var threshold = 0.15;\r\n      var pixels=uInt8Array\r\n      var pixelCount=uInt8Array.length;\r\n      var pixelArray = [];\r\n      var bgPixelArray = [];\r\n      for (var i = 0, offset, r, g, b, a; i < pixelCount; i++) {\r\n          offset = i * 4;\r\n          r = pixels[offset + 0];\r\n          g = pixels[offset + 1];\r\n          b = pixels[offset + 2];\r\n          a = pixels[offset + 3];\r\n          // If pixel is mostly opaque and not white\r\n          if (a >= 125) {\r\n              if (!(r > 250 && g > 250 && b > 250)) {\r\n                  pixelArray.push([r, g, b]);\r\n\r\n                  if ((i < pixelCount * threshold) || (i % imageHeight < imageWidth * threshold / 2)) {\r\n                      bgPixelArray.push([r, g, b]);\r\n                  }\r\n              }\r\n          }\r\n      }\r\n      var cmap = MMCQ.quantize(pixelArray, 5);\r\n      var palette = cmap.palette();\r\n      var bgCmap = MMCQ.quantize(bgPixelArray, 5);\r\n      var bgPalette = bgCmap.palette();\r\n\r\n      done.apply(this,[ [palette, bgPalette[0]] ])\r\n\r\n    } // 200\r\n  };\r\n  xhr.send();\r\n}\r\n```\r\n\r\nThe result is anyways not the same as the getColors function. The reason I think it that I'm wrong when converting the ```uInt8Array```:\r\n\r\n```javascript\r\nvar uInt8Array = new Uint8Array(this.response);\r\nvar i = uInt8Array.length;\r\n```\r\n\r\n to the ```rgba``` format:\r\n\r\n```javascript\r\n// Store the RGB values in an array format suitable for quantize function\r\n      var threshold = 0.15;\r\n      var pixels=uInt8Array\r\n      var pixelCount=uInt8Array.length;\r\n      var pixelArray = [];\r\n      var bgPixelArray = [];\r\n      for (var i = 0, offset, r, g, b, a; i < pixelCount; i++) {\r\n          offset = i * 4;\r\n          r = pixels[offset + 0];\r\n          g = pixels[offset + 1];\r\n          b = pixels[offset + 2];\r\n          a = pixels[offset + 3];\r\n          // If pixel is mostly opaque and not white\r\n          if (a >= 125) {\r\n              if (!(r > 250 && g > 250 && b > 250)) {\r\n                  pixelArray.push([r, g, b]);\r\n\r\n                  if ((i < pixelCount * threshold) || (i % imageHeight < imageWidth * threshold / 2)) {\r\n                      bgPixelArray.push([r, g, b]);\r\n                  }\r\n              }\r\n          }\r\n      }\r\n```\r\n\r\nAny hint?\r\n"},"comment":{"url":"https://api.github.com/repos/lokesh/color-thief/issues/comments/163190936","html_url":"https://github.com/lokesh/color-thief/issues/86#issuecomment-163190936","issue_url":"https://api.github.com/repos/lokesh/color-thief/issues/86","id":163190936,"user":{"login":"ManarKamel","id":4993622,"avatar_url":"https://avatars.githubusercontent.com/u/4993622?v=3","gravatar_id":"","url":"https://api.github.com/users/ManarKamel","html_url":"https://github.com/ManarKamel","followers_url":"https://api.github.com/users/ManarKamel/followers","following_url":"https://api.github.com/users/ManarKamel/following{/other_user}","gists_url":"https://api.github.com/users/ManarKamel/gists{/gist_id}","starred_url":"https://api.github.com/users/ManarKamel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ManarKamel/subscriptions","organizations_url":"https://api.github.com/users/ManarKamel/orgs","repos_url":"https://api.github.com/users/ManarKamel/repos","events_url":"https://api.github.com/users/ManarKamel/events{/privacy}","received_events_url":"https://api.github.com/users/ManarKamel/received_events","type":"User","site_admin":false},"created_at":"2015-12-09T11:11:32Z","updated_at":"2015-12-09T11:11:32Z","body":"@loretoparisi No that's not what I meant, What amazing about color thief is the size, It's just 6kb minified, so you can use it for websites, but unfortunately it doesn't support XHR.\r\nYou found a solution by using a JPG decoder because you couldn't use canvas for XHR images and get the right colors, right?\r\n\r\nBut how about another solution, like converting XHR images to base64, then we pass the data to the normal colorThief.getColor(), Did you try that?\r\n\r\nIf you're interested in some tvOS-like web project, check this experiment: http://codepen.io/ManarKamel/pen/zvqgZa"}}