@pioug/colorthief
Version:
Get the dominant color or color palette from an image.
39 lines (32 loc) • 970 B
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Color Thief</title>
<link rel="stylesheet" href="./screen.css" />
</head>
<body>
<img
src="https://color-thief-cors-test-images.s3-us-west-1.amazonaws.com/boise-spacebar-arcade.jpeg"
crossorigin="anonymous"
/>
<div id="result"></div>
<script type="module">
import ColorThief from "../../dist/color-thief.mjs";
const colorThief = new ColorThief();
const img = document.querySelector("img");
function getColorFromImage(img) {
const result = colorThief.getColor(img);
document.querySelector("#result").innerText = result;
}
if (img.complete) {
getColorFromImage(img);
} else {
img.addEventListener("load", function () {
getColorFromImage(img);
});
}
</script>
</body>
</html>