10 Trending projects on GitHub for web developers - 13th August 2021 で紹介されていた Color Thief というもの。
「例」引用:
画像から色を抽出してくれる Color Thief
お試し。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>https://lokeshdhakar.com/projects/color-thief/<h2>
<img id="thomas" src="thomas.png" width=30% height=30% crossorigin="anonymous" />
<label id="label1">Do you like Train?</label>
<img id="scene" src="lime.jpg" width=40% height=40% crossorigin="anonymous" />
<label id="label2">So beautiful.</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.umd.js"></script>
<script>
const colorThief = new ColorThief();
const img1 = document.querySelector('img#thomas');
var color;
// Make sure image is finished loading
if (img1.complete) {
color = colorThief.getColor(img1);
} else {
image.addEventListener('load', function() {
color = colorThief.getColor(img1);
});
}
var rbg = color[0] + "," + color[1] + "," + color[2];
document.getElementById("label1").style.color = "rgb("+ rbg +")" ;//機関車の画像の色
const img2 = document.querySelector('img#scene');
if (img2.complete) {
color = colorThief.getColor(img2);
} else {
image.addEventListener('load', function() {
color = colorThief.getColor(img2);
});
}
rbg = color[0] + "," + color[1] + "," + color[2];
document.getElementById("label2").style.color = "rgb("+ rbg +")" ; //レモンの画像の色
</script>
</body>
</html>
Trouble using Color Thief?
- Search Stackoverflow to see if other people have run into the same issue you are having.
- If your issue is unique, then post a new question on Stackoverflow. Use the color-thief tag to make it easier to find.
1.Stackoverflowを検索して、あなたが抱えている問題と同じ問題に他の人が遭遇していないかを確認しましょう。
2.問題がみつからない場合は、Stackoverflowに新しい質問を投稿しましょう。検索しやすいようにcolor-thiefタグを使いましょう。
以上、触ってみたところのメモ書きです。参考になればさいわいです。