css 如何检查特定像素的颜色，并根据HTML5/JavaScript中像素的颜色更改h1中的文本和文本颜色？

pdkcd3nj 于 2023-06-25 发布在 HTML5

关注(0)|答案(1)|浏览(272)

我试图找到特定像素的颜色，并根据HTML5和JavaScript中像素的颜色来改变h1中的文本和文本的颜色。我有问题像素的坐标，图像来自一个URL。我已经有了CSS类的颜色，我希望它改变它。
坐标是315 189
我试着使用我在不同网站上找到的代码，但它从来没有解释如何做任何事情，只是给出代码，所以它从来没有工作。

function getPixel(url, x, y) {
  var img = new Image();
  img.src = //this is where the url goes;
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');
  context.drawImage(img, 0, 0);
  return context.getImageData(x, y, 1, 1).data;
}

css

来源：https://stackoverflow.com/questions/76478787/how-do-i-check-the-color-of-a-specific-pixel-and-change-text-and-color-of-text-i

1条答案

按热度按时间

voase2hg1#

您提供的代码基本上是正确的，将检索像素的颜色值，但它有一些问题。让我先解释一下你的代码。
代码首先创建一个Image对象，并将其存储在img变量中。在下一行中，我们提供了图像的源代码。然后，我们创建一个画布对象，允许您渲染图形。下一行是我们检索canvas.getContext('2d');的地方，表明我们使用的是二维图像。最后，我们在0，0位置绘制图像，然后使用getImageData检索特定像素的rgba值。
如果没有解释，代码将不能直接在html文档中工作。它必须由某种元素触发。我能够使用提供的大部分代码，并让它在我的本地系统上运行。我使用镜像的.onload事件触发了代码：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <h1 id="heading">Hello, world!</h1>

  <script>
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');

    // Load the image
    const image = new Image();

    // what to do when loading the image
    image.onload = function() {
      // setting the canvas frame to encompass the entire image
      canvas.width = image.width;
      canvas.height = image.height;

      // draw the image on the canvas
      context.drawImage(image, 0, 0);

      // getting the rgb values from the x and y pixel
      var x = 315;
      var y = 189;
      const pixelData = context.getImageData(x, y, 1, 1).data;
      const red = pixelData[0];
      const green = pixelData[1];
      const blue = pixelData[2];

      console.log(red, green, blue);

      // adding the color to the h1 heading
      const heading = document.getElementById('heading');
      heading.style.color = `rgba(${red}, ${green}, ${blue}, 1)`;
    };

    // Set the source of the image
    image.src = 'your_image_url';

    document.body.appendChild(canvas);
  </script>
</body>
</html>

在这段代码中，我决定用与图像相同的尺寸来定义画布的宽度和高度，以便可以完全渲染它。另外，如果您注意到，getImageData方法的data属性返回一个rgba值数组。最后，我使用这些值重新定义<h1>标签的颜色。
此外，如果您在选择某个像素值来获取其颜色时遇到困难，您可以将pixelate effect添加到Cloudinary或任何其他媒体转换平台的图像中，以放大每个像素。

赞(0）回复(0）举报 2023-06-25

我来回答

css 如何检查特定像素的颜色，并根据HTML5/JavaScript中像素的颜色更改h1中的文本和文本颜色？

1条答案

相关问题

热门标签

最新问答