html根据图片变换背景色
javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.item {
width: 50%;
height: 80vh;
margin: 0 auto;
border: 1px solid red;
}
</style>
</head>
<body>
<img src="./img/1.png" alt="" style="width: 200px;height: 200px;border: 1px solid red;">
<script>
// Load the image
const img = new Image();
img.src = './img/1.png';
// Wait for the image to load
img.onload = function () {
// Create a canvas element
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
// Draw the image onto the canvas
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
// Get the dominant color of the image
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const colors = {};
for (let i = 0; i < imageData.data.length; i += 4) {
const r = imageData.data[i];
const g = imageData.data[i + 1];
const b = imageData.data[i + 2];
const color = `${r},${g},${b}`;
if (colors[color]) {
colors[color]++;
} else {
colors[color] = 1;
}
}
const dominantColor = Object.keys(colors).reduce((a, b) => colors[a] > colors[b] ? a : b);
// Set the background color of the webpage to the dominant color
document.body.style.backgroundColor = `rgb(${dominantColor})`;
};
</script>
</body>
</html>