<!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 imageconst img =newImage();
img.src ='./img/1.png';// Wait for the image to load
img.onload=function(){// Create a canvas elementconst canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;// Draw the image onto the canvasconst ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);// Get the dominant color of the imageconst 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>