javascript color font by background image

YOU.com answered on September 12, 2023 Popularity 1/10 Helpfulness 1/10

answer javascript color font by background image

javascript color font by background image

Comment

// Get the background image element
const backgroundImage = document.getElementById('background-image');

// Create a canvas element
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// Load the image onto the canvas
const image = new Image();
image.onload = function() {
  canvas.width = this.width;
  canvas.height = this.height;
  context.drawImage(this, 0, 0);

  // Get the color at a desired position on the canvas (e.g., center)
  const x = Math.floor(canvas.width / 2);
  const y = Math.floor(canvas.height / 2);
  const pixelData = context.getImageData(x, y, 1, 1).data;

  // Get the RGB values of the pixel
  const red = pixelData[0];
  const green = pixelData[1];
  const blue = pixelData[2];

  // Change the font color based on the average color of the background image
  const fontColor = (red + green + blue) / 3 > 128 ? 'black' : 'white';
  document.body.style.color = fontColor;
};

image.src = backgroundImage.src;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

javascript color font by background image

Contents

More Related Answers

javascript color font by background image

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.