@pioug/colorthief
Version:
Get the dominant color or color palette from an image.
48 lines (47 loc) • 1.59 kB
HTML
<html class="no-js" lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="dist/color-thief.min.js"></script>
</head>
<body>
<header>
<div class="container">
<div id="samedomain">
<img src="examples/img/image-1.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/image-1.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(
"https://lokeshdhakar.com/media/posts/color-thief/color-thief-pixels.png",
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>
</header>
</body>
</html>