janishutz/color-thief
1
0
Fork 0
mirror of https://github.com/janishutz/color-thief.git synced 2025-11-25 22:04:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

cross-domain and url

Browse Source 
getColorFromUrl gets color from an image served from the same domain,
so you don't have to create an image element to get the color.

getColorAsync gets the color from another domain that has an open
cross-domain policy.
This commit is contained in:
Patrick Keenan
2016-05-27 12:32:31 -07:00
parent de968be816
commit be918bbaef
2 changed files with 86 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
async.html Executable file
View File

@@ -0,0 +1,42 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<script src="examples/js/jquery.js"></script>
<script src="src/color-thief.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="samedomain">
<img src="examples/img/photo1.jpg" width="400" height="200">
<h1>Same domain, image by url</h1>
</div>
<script type="text/javascript">
var colorThief = new ColorThief();
colorSync = colorThief.getColorFromUrl("examples/img/photo1.jpg", function(color){
$('#samedomain').css('background-color','rgb('+color[0]+','+color[1]+','+color[2]+')')
console.log('url',color)
});
</script>
<div id="crossdomain">
<img width="400" height="200">
<h1>Cross-domain, image by url</h1>
</div>
<script type="text/javascript">
colorThief.getColorAsync("http://lorempixel.com/400/200/",function(color, element){
$('#crossdomain').css('background-color','rgb('+color[0]+','+color[1]+','+color[2]+')')
$('#crossdomain img').attr('src',element.src)
console.log('async', color, element.src)
});
</script>
</div>
</body>
</html>

44
src/color-thief.js
View File

@@ -137,6 +137,50 @@ ColorThief.prototype.getPalette = function(sourceImage, colorCount, quality) {
return palette; return palette;
}; };
ColorThief.prototype.getColorFromUrl = function(imageUrl, callback, quality) {
sourceImage = document.createElement("img");
var thief = this;
sourceImage.addEventListener('load' , function(){
var palette = thief.getPalette(sourceImage, 5, quality);
var dominantColor = palette[0];
callback(dominantColor, imageUrl);
});
sourceImage.src = imageUrl
};
ColorThief.prototype.getImageData = function(imageUrl, callback) {
xhr = new XMLHttpRequest();
xhr.open('GET', imageUrl, true);
xhr.responseType = 'arraybuffer'
xhr.onload = function(e) {
if (this.status == 200) {
uInt8Array = new Uint8Array(this.response)
i = uInt8Array.length
binaryString = new Array(i);
for (var i = 0; i < uInt8Array.length; i++){
binaryString[i] = String.fromCharCode(uInt8Array[i])
}
data = binaryString.join('')
base64 = window.btoa(data)
callback ("data:image/png;base64,"+base64)
}
}
xhr.send();
};
ColorThief.prototype.getColorAsync = function(imageUrl, callback, quality) {
var thief = this;
this.getImageData(imageUrl, function(imageData){
sourceImage = document.createElement("img");
sourceImage.addEventListener('load' , function(){
var palette = thief.getPalette(sourceImage, 5, quality);
var dominantColor = palette[0];
callback(dominantColor, this);
});
sourceImage.src = imageData;
});
};