在 JavaScript 中检测图像主要是暗还是亮? [英] Detect if image is mostly dark or light in JavaScript?

问题描述

我正在寻找一种方法来扫描任何给定的图像，并确定它主要是深色还是浅色(在某种意义上说是明亮鲜艳的颜色或深色和不饱和的颜色).

I'm looking for a way to scan any given image and determine if it is mostly dark or light (in a sense of bright vivid colours or dark and desaturated colours).

这是在 PHP 中完成的:背景图像暗还是亮?

This is done in PHP: Background image dark or light?

但是有没有办法使用 Javascript 即时完成?查看像素并确定它们的 RGB?我只需要知道是将覆盖文本分别设置为黑色还是白色.

But is there a way to do it on the fly with Javascript? To look over the pixels and determine their RGBs? I need to know simply whether to style the overlaying text black or white respectively.

推荐答案

这可以通过使用 HTML5 canvas，作为一种解决方案.

This could be achieved by using HTML5 canvas, as one solution.

将您的图像加载到画布中，然后您可以访问像素值并执行您选择对它们使用的任何算法

Load your image into the canvas, you can then access the pixel values and perform whatever algorithm you choose to use on them

据我所知，没有内置命令可以执行您描述的精确任务.

There are no built in commands, that I know of, to do the precise task that you describe.

另一种解决方案是服务或读取数据到blob 原始格式，数组 值，以便它们可以被处理.

Another solution would be to serve or read the data into a blob in a raw format, an array of values, so that they can be processed.

这篇关于在 JavaScript 中检测图像主要是暗还是亮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！