通过 Javascript 获取图像的平均颜色

Question

不确定这是否可行，但希望编写一个脚本来返回图像的平均 hex 或 rgb 值。我知道可以在 AS 中完成，但希望在 JavaScript 中完成。

Answer 1

AFAIK，执行此操作的唯一方法是使用 ...

DEMO V2：http://jsfiddle.net/xLF38/818/

注意，这仅适用于同一域中的图像以及支持 HTML5 画布的浏览器：

function getAverageRGB(imgEl) {

    var blockSize = 5, // only visit every 5 pixels
        defaultRGB = {r:0,g:0,b:0}, // for non-supporting envs
        canvas = document.createElement('canvas'),
        context = canvas.getContext && canvas.getContext('2d'),
        data, width, height,
        i = -4,
        length,
        rgb = {r:0,g:0,b:0},
        count = 0;

    if (!context) {
        return defaultRGB;
    }

    height = canvas.height = imgEl.naturalHeight || imgEl.offsetHeight || imgEl.height;
    width = canvas.width = imgEl.naturalWidth || imgEl.offsetWidth || imgEl.width;

    context.drawImage(imgEl, 0, 0);

    try {
        data = context.getImageData(0, 0, width, height);
    } catch(e) {
        /* security error, img on diff domain */
        return defaultRGB;
    }

    length = data.data.length;

    while ( (i += blockSize * 4) < length ) {
        ++count;
        rgb.r += data.data[i];
        rgb.g += data.data[i+1];
        rgb.b += data.data[i+2];
    }

    // ~~ used to floor values
    rgb.r = ~~(rgb.r/count);
    rgb.g = ~~(rgb.g/count);
    rgb.b = ~~(rgb.b/count);

    return rgb;

}

请 IE，查看 excanvas。

Answer 2

我想我会发布一个我最近遇到的项目来获得主色：

Color Thief

用于从图像中获取主色或代表性调色板的脚本。使用 JavaScript 和 Canvas。

其他提到和建议主色的解决方案从未在正确的上下文中（“在 javascript 中”）真正回答问题。希望这个项目能够帮助那些想要这样做的人。

Answer 3

“主色”很棘手。您要做的就是比较颜色空间中每个像素与其他每个像素之间的距离（欧几里德距离），然后找到颜色与其他所有颜色最接近的像素。该像素是主色。平均颜色通常是泥色。

我希望这里有 MathML 来向您展示欧几里得距离。谷歌一下。

我已经使用 PHP/GD 在 RGB 颜色空间中完成了上述执行： https://gist.github.com/cf23f8bddb307ad4abd8

然而，这在计算上非常昂贵。它会使您的系统在处理大图像时崩溃，并且如果您在客户端中尝试它，肯定会使您的浏览器崩溃。我一直致力于将我的执行重构为：
- 将结果存储在查找表中以供将来在每个像素的迭代中使用。
- 将大图像划分为 20px 20px 的网格，以实现局部主导。
- 使用 x1y1 和 x1y2 之间的欧氏距离来计算 x1y1 和 x1y3 之间的距离。

如果您在这方面取得进展，请告诉我。我会很高兴看到它。我也会这样做。

Canvas 绝对是在客户端实现此目的的最佳方式。 SVG 不是，SVG 是基于矢量的。执行完毕后，我想做的下一件事是在画布中运行它（可能使用网络工作者来计算每个像素的总距离）。

另一件需要考虑的事情是，RGB 并不是一个很好的颜色空间，因为 RGB 空间中颜色之间的欧氏距离与视觉距离不是很接近。一个更好的颜色空间可能是 LUV，但我还没有找到一个好的库，或者任何将 RGB 转换为 LUV 的算法。

一种完全不同的方法是对彩虹中的颜色进行排序，并构建一个具有公差的直方图，以考虑颜色的不同深浅。我没有尝试过这个，因为对彩虹中的颜色进行排序很困难，颜色直方图也很困难。接下来我可能会尝试这个。再次，如果您在这里取得任何进展，请告诉我。

Answer 4

function get_average_rgb(img) {
    var context = document.createElement('canvas').getContext('2d');
    if (typeof img == 'string') {
        var src = img;
        img = new Image;
        img.setAttribute('crossOrigin', ''); 
        img.src = src;
    }
    context.imageSmoothingEnabled = true;
    context.drawImage(img, 0, 0, 1, 1);
    return context.getImageData(0, 0, 1, 1).data.slice(0,3);
}

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg==" width="32" height="32" id="img1" onload="console.log(get_average_rgb(this))">
<img src="https://lh3.googleusercontent.com/a/AEdFTp4Wi1oebZlBCwFID8OZZuG0HLsL-xIxO5m2TNw=k-s32" id="img2" crossOrigin="anonymous" onload="console.log(get_average_rgb(this))">

通过 datauri 支持获取图像平均颜色的方法不太准确，但最快。

Answer 5

第一：无需 HTML5 Canvas 或 SVG 即可完成。
实际上，有人刚刚设法生成客户端-使用 JavaScript 的侧 PNG 文件，没有画布或 SVG，使用 数据 URI 方案。

编辑：您可以简单地创建一个 PNG document.getElementById("canvas").toDataURL("image/png", 1.0)

第二：您可能实际上不需要 Canvas 、SVG 或以上任何一个。
如果您只需要在客户端处理图像，而不修改它们，那么这一切都是不需要的。

您可以从页面的img标签中获取源地址，并对其发出XHR请求- 它很可能来自浏览器缓存 - 并将其作为来自 Javascript 的字节流进行处理。
您需要充分了解图像格式。 （上面的生成器部分基于 libpng 源，可能提供一个很好的起点。）

Answer 6

令人惊讶的是，这只需 4 行代码即可完成：

const context = document.createElement("canvas").getContext("2d");
context.drawImage(imageObject, 0, 0, 1, 1);
const i = context.getImageData(0, 0, 1, 1).data;


const rgba = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`;
// OR
const HEX = "#" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1);

示例：

const canvas = document.getElementById("canvas"),
  preview = document.getElementById("preview"),
  ctx = canvas.getContext("2d");

canvas.width = 1;
canvas.height = 1;

preview.width = 400;
preview.height = 400;

function getDominantColor(imageObject) {
  //draw the image to one pixel and let the browser find the dominant color
  ctx.drawImage(imageObject, 0, 0, 1, 1);

  //get pixel color
  const i = ctx.getImageData(0, 0, 1, 1).data;

  console.log(`rgba(${i[0]},${i[1]},${i[2]},${i[3]})`);

  console.log("#" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1));
}



// vvv all of this is to just get the uploaded image vvv
const input = document.getElementById("input");
input.type = "file";
input.accept = "image/*";

input.onchange = event => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = readerEvent => {
    const image = new Image();
    image.onload = function() {
      //shows preview of uploaded image
      preview.getContext("2d").drawImage(
        image,
        0,
        0,
        preview.width,
        preview.height,
      );
      getDominantColor(image);
    };
    image.src = readerEvent.target.result;
  };
  reader.readAsDataURL(file, "UTF-8");
};

canvas {
  width: 200px;
  height: 200px;
  outline: 1px solid #000000;
}

<canvas id="preview"></canvas>
<canvas id="canvas"></canvas>
<input id="input" type="file" />

工作原理：

创建画布上下文

const context = document.createElement("canvas").getContext("2d");

这会将图像仅绘制到一个画布像素上，使浏览器为您找到主色。

context.drawImage(imageObject, 0, 0, 1, 1);

之后，只需获取像素的图像数据即可：

const i = context.getImageData(0, 0, 1, 1).data;

最后，转换为 rgba 或 HEX：

const rgba = `rgba(${i[0]},${i[1]},${i[2]},${i[3]})`;

const HEX = "#" + ((1 << 24) + (i[0] << 16) + (i[1] << 8) + i[2]).toString(16).slice(1);

不过，这种方法有一个问题，那就是 getImageData有时会抛出错误无法从canvas获取图像数据，因为canvas已被跨源数据污染。，这就是demo中需要上传图像而不是上传图像的原因例如输入 URL。

该方法还可以用于通过增加宽度和高度来绘制图像来对图像进行像素化。

这适用于 Chrome，但可能不适用于其他浏览器。

Answer 7

我想说的是通过 HTML canvas 标签。

此处找到 @Georg 发表的一篇文章，讨论 Opera 开发人员的一小段代码：

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i  ] = 255 - pix[i  ]; // red
    pix[i+1] = 255 - pix[i+1]; // green
    pix[i+2] = 255 - pix[i+2]; // blue
    // i+3 is alpha (the fourth element)
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

您可以在 使用每个像素的 R、G 和 B 值反转图像。您可以轻松存储 RGB 值，然后将红色、绿色和蓝色数组四舍五入，最后将它们转换回十六进制代码。

Answer 8

这是@350D的答案，但异步（因为某些图像可能需要时间加载）并且在打字稿中

async function get_average_rgb(src: string): Promise<Uint8ClampedArray> {
/* https://stackoverflow.com/questions/2541481/get-average-color-of-image-via-javascript */
    return new Promise(resolve => {
        let context = document.createElement('canvas').getContext('2d');
        context!.imageSmoothingEnabled = true;

        let img = new Image;
        img.src = src;
        img.crossOrigin = "";

        img.onload = () => {
            context!.drawImage(img, 0, 0, 1, 1);
            resolve(context!.getImageData(0, 0, 1, 1).data.slice(0,3));
        };
    });
}

Answer 9

我最近遇到了一个 jQuery 插件，它可以实现我最初想要的 https://github.com/ briangonzalez/jquery.adaptive-backgrounds.js 关于从图像中获取主导颜色。

Answer 10

一体化解决方案

我个人会结合Color Thief以及修改后的版本命名该颜色 获得足够多的图像主色结果。

示例：

考虑以下图像：

您可以使用以下代码提取与主色相关的图像数据：

let color_thief = new ColorThief();
let sample_image = new Image();

sample_image.onload = () => {
  let result = ntc.name('#' + color_thief.getColor(sample_image).map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? '0' + hex : hex;
    
  }).join(''));
  
  console.log(result[0]); // #f0c420     : Dominant HEX/RGB value of closest match
  console.log(result[1]); // Moon Yellow : Dominant specific color name of closest match
  console.log(result[2]); // #ffff00     : Dominant HEX/RGB value of shade of closest match
  console.log(result[3]); // Yellow      : Dominant color name of shade of closest match
  console.log(result[4]); // false       : True if exact color match
};

sample_image.crossOrigin = 'anonymous';
sample_image.src = document.getElementById('sample-image').src;

Answer 11

JavaScript 无法访问图像的各个像素颜色数据。至少，可能要到 html5 为止……届时您将能够将图像绘制到画布上，然后检查画布（也许，我自己从未这样做过）。

Answer 12

这是关于“颜色量化”，它有多种方法，例如 MMCQ （修改中值剪切量化）或 OQ（八叉树量化）。不同的方法使用 K-Means 来获取颜色簇。

我已经将所有内容放在一起，因为我正在寻找 tvOS 的解决方案，其中有一个 XHTML 子集，没有 元素：

使用 XMLHttpRequest 生成 RGB 图像的主色

Answer 13

要获得图像的平均（不是主）颜色，请创建一个按比例缩小的原始图像的小画布（最大尺寸，即：10 像素）。然后循环画布区域imageData来构造平均RGB：

const getAverageColor = (img) => {
  
  const max = 10; // Max size (Higher num = better precision but slower)
  const {naturalWidth: iw, naturalHeight: ih} = img;
  const ctx = document.createElement`canvas`.getContext`2d`; 
  const sr = Math.min(max / iw, max / ih); // Scale ratio
  const w = Math.ceil(iw * sr); // Width
  const h = Math.ceil(ih * sr); // Height
  const a = w * h;              // Area
  
  img.crossOrigin = 1;
  ctx.canvas.width = w;
  ctx.canvas.height = h;
  ctx.drawImage(img, 0, 0, w, h);
  
  const data = ctx.getImageData(0, 0, w, h).data;
  let r = g = b = 0;
  
  for (let i=0; i<data.length; i+=4) {
    r += data[i];
    g += data[i+1];
    b += data[i+2];
  }

  r = ~~(r/a);
  g = ~~(g/a);
  b = ~~(b/a);

  return {r, g, b};
};

const setBgFromAverage = (img) => {
  img.addEventListener("load", () => {
    const {r,g,b} = getAverageColor(img);
    img.style.backgroundColor = `rgb(${r},${g},${b})`;
  });
};

document.querySelectorAll('.thumb').forEach(setBgFromAverage);

.thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.thumb { height: 100px; padding: 20px; }

<div class="thumbs">
  <img class="thumb" alt="image" src="https://i.imgur.com/22BrBjx.jpeg">
  <img class="thumb" alt="image" src="https://i.imgur.com/MR0dUpw.png">
  <img class="thumb" alt="image" src="https://i.imgur.com/o7lpiDR.png">
  <img class="thumb" alt="image" src="https://i.imgur.com/egYvHp6.jpeg">
  <img class="thumb" alt="image" src="https://i.imgur.com/62EAzOY.jpeg">
  <img class="thumb" alt="image" src="https://i.imgur.com/3VxBMeF.jpeg">
</div>

Answer 14

正如其他答案中指出的那样，通常您真正想要的主色而不是通常为棕色的平均颜色。我编写了一个获取最常见颜色的脚本，并将其发布在此 gist

Answer 15

Colortheif 是一个非常好的软件包。我曾经使用过它并且效果很好。与画布结合，我可以创建一个提取颜色的调色板图像。但是转向打字稿，colortheif 没有打字，所以这对我来说是一个问题。

Answer 16

有一个在线工具 pickimagecolor.com 可以帮助您找到平均值或主导值图像的颜色。您只需从计算机上传图像，然后单击该图像。它给出了 HEX、RGB 和 HSV 的平均颜色。它还会找到与该颜色相匹配的色调以供选择。我已经用过很多次了。