使用 XMLHttpRequest 为 RGB 图像生成主色

Posted 2023-02-16

【中文标题】使用 XMLHttpRequest 为 RGB 图像生成主色

【英文标题】：Generate the Dominant Colors for an RGB image with XMLHttpRequest

【发布时间】：2016-01-23 13:57:34

【问题描述】：

读者须知：这是一个很长的问题，但需要背景知识才能理解所提出的问题。

color quantization technique 通常用于获取图像的主色。 进行颜色量化的著名库之一是 Leptonica 到 Modified Median Cut Quantization (MMCQ) and octree quantization (OQ) Github 的 Color-thief @lokesh 是一个非常简单的 MMCQ 算法 javascript 实现：

var colorThief = new ColorThief();
colorThief.getColor(sourceImage);

从技术上讲，<img/> html 元素上的图像支持<canvas/> 元素：

var CanvasImage = function (image) 
    this.canvas  = document.createElement('canvas');
    this.context = this.canvas.getContext('2d');

    document.body.appendChild(this.canvas);

    this.width  = this.canvas.width  = image.width;
    this.height = this.canvas.height = image.height;

    this.context.drawImage(image, 0, 0, this.width, this.height);
;

这就是TVML 的问题，我们稍后会看到。

我最近知道的另一个实现链接到这篇文章Using imagemagick, awk and kmeans to find dominant colors in images，它链接到Using python to generate awesome linux desktop themes。 作者发布了一篇关于 Using python and k-means to find the dominant colors in images 的文章，在那里使用过（抱歉所有这些链接，但我正在追查我的历史......）。

作者非常高效，还添加了一个 JavaScript 版本，我在这里发布：Using JavaScript and k-means to find the dominant colors in images

在这种情况下，我们生成图像的主色，不是使用 MMCQ（或 OQ）算法，而是使用 K-Means。 问题是图像也必须是：

<canvas id="canvas" style="display: none;"  ></canvas>

然后

function analyze(img_elem) 
        var ctx = document.getElementById('canvas').getContext('2d')
          , img = new Image();
        img.onload = function() 
          var results = document.getElementById('results');
          results.innerHTML = 'Waiting...';
          var colors = process_image(img, ctx)
            , p1 = document.getElementById('c1')
            , p2 = document.getElementById('c2')
            , p3 = document.getElementById('c3');
          p1.style.backgroundColor = colors[0];
          p2.style.backgroundColor = colors[1];
          p3.style.backgroundColor = colors[2];
          results.innerHTML = 'Done';
        
        img.src = img_elem.src;
      

这是因为 Canvas 有一个 getContext() 方法，该方法公开了 2D 图像绘制 API - 请参阅 An introduction to the Canvas 2D API

这个上下文ctx被传递给图像处理函数

  function process_image(img, ctx) 
    var points = [];
    ctx.drawImage(img, 0, 0, 200, 200);
    data = ctx.getImageData(0, 0, 200, 200).data;
    for (var i = 0, l = data.length; i < l;  i += 4) 
      var r = data[i]
        , g = data[i+1]
        , b = data[i+2];
      points.push([r, g, b]);
    
    var results = kmeans(points, 3, 1)
     , hex = [];
    for (var i = 0; i < results.length; i++) 
      hex.push(rgbToHex(results[i][0]));
    
    return hex;
  

这样就可以通过Context在Canvas上绘制图片，获取图片数据：

ctx.drawImage(img, 0, 0, 200, 200);
data = ctx.getImageData(0, 0, 200, 200).data;

另一个不错的解决方案是在 CoffeeScript 中，ColorTunes，但这也使用了 a：

ColorTunes.getColorMap = function(canvas, sx, sy, w, h, nc) 
    var index, indexBase, pdata, pixels, x, y, _i, _j, _ref, _ref1;
    if (nc == null) 
      nc = 8;
    
    pdata = canvas.getContext("2d").getImageData(sx, sy, w, h).data;
    pixels = [];
    for (y = _i = sy, _ref = sy + h; _i < _ref; y = _i += 1) 
      indexBase = y * w * 4;
      for (x = _j = sx, _ref1 = sx + w; _j < _ref1; x = _j += 1) 
        index = indexBase + (x * 4);
        pixels.push([pdata[index], pdata[index + 1], pdata[index + 2]]);
      
    
    return (new MMCQ).quantize(pixels, nc);
  ;

但是，等等，TVML 中没有 <canvas/> 元素！

当然，也有像 Objective-C ColorCube、DominantColor 这样的原生解决方案——这是使用 K-means

还有来自 CocoaControls 的 @AaronBrethorst 非常漂亮且可重复使用的 ColorArt。

尽管这可以通过原生到 JavaScriptCore 桥接器在 TVML 应用程序中使用 - 请参阅 How to bridge TVML/JavaScriptCore to UIKit/Objective-C (Swift)?

我的目标是让这项工作在TVJS 和TVML 中完全发挥作用。

最简单的 MMCQ JavaScript 实现不需要 Canvas：参见 Basic Javascript port of the MMCQ (modified median cut quantization) by Nick Rabinowitz，但需要图像的 RGB 数组：

var cmap = MMCQ.quantize(pixelArray, colorCount);

取自 HTML <canvas/>，这就是它的原因！

function createPalette(sourceImage, colorCount) 

    // Create custom CanvasImage object
    var image = new CanvasImage(sourceImage),
        imageData = image.getImageData(),
        pixels = imageData.data,
        pixelCount = image.getPixelCount();

    // Store the RGB values in an array format suitable for quantize function
    var pixelArray = [];
    for (var i = 0, offset, r, g, b, a; i < pixelCount; i++) 
        offset = i * 4;
        r = pixels[offset + 0];
        g = pixels[offset + 1];
        b = pixels[offset + 2];
        a = pixels[offset + 3];
        // If pixel is mostly opaque and not white
        if (a >= 125) 
            if (!(r > 250 && g > 250 && b > 250)) 
                pixelArray.push([r, g, b]);
            
        
    

    // Send array to quantize function which clusters values
    // using median cut algorithm

    var cmap = MMCQ.quantize(pixelArray, colorCount);
    var palette = cmap.palette();

    // Clean up
    image.removeCanvas();

    return palette;

[问题] 如何在不使用 HTML5 <canvas/> 的情况下生成 RGB 图像的主色，但使用纯 JavaScript 从使用 XMLHttpRequest 获取的图像的 ByteArray 生成？

[更新] 我已将此问题发布到 Color-Thief github repo，将 RGB 数组计算调整为最新的代码库。 我尝试过的解决方案是这样的

ColorThief.prototype.getPaletteNoCanvas = function(sourceImageURL, colorCount, quality, done) 
  var xhr = new XMLHttpRequest();
  xhr.open('GET', sourceImageURL, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = function(e) 
    if (this.status == 200) 

      var uInt8Array = new Uint8Array(this.response);
      var i = uInt8Array.length;
      var biStr = new Array(i);
      while (i--)
       biStr[i] = String.fromCharCode(uInt8Array[i]);
      

      if (typeof colorCount === 'undefined') 
          colorCount = 10;
      
      if (typeof quality === 'undefined' || quality < 1) 
          quality = 10;
      

      var pixels     = uInt8Array;
      var pixelCount = 152 * 152 * 4 // this should be width*height*4

      // Store the RGB values in an array format suitable for quantize function
      var pixelArray = [];
      for (var i = 0, offset, r, g, b, a; i < pixelCount; i = i + quality) 
          offset = i * 4;
          r = pixels[offset + 0];
          g = pixels[offset + 1];
          b = pixels[offset + 2];
          a = pixels[offset + 3];
          // If pixel is mostly opaque and not white
          if (a >= 125) 
              if (!(r > 250 && g > 250 && b > 250)) 
                  pixelArray.push([r, g, b]);
              
          
      

      // Send array to quantize function which clusters values
      // using median cut algorithm
      var cmap    = MMCQ.quantize(pixelArray, colorCount);
      var palette = cmap? cmap.palette() : null;
      done.apply(this,[ palette ])

     // 200
  ;
  xhr.send();

但它不会返回正确的 RGB 颜色数组。

[更新] 感谢所有的建议，我得到了它的工作。现在可以在Github 上找到完整的示例，

【参考方案1】：

canvas 元素被用作将图像解码为 RGBA 数组的便捷方式。您也可以使用纯 JavaScript 库来进行图像解码。

jpgjs 是 JPEG 解码器，pngjs 是 PNG 解码器。看起来 JPEG 解码器可以按原样与 TVJS 一起使用。然而，PNG 解码器看起来像是在 Node 或 Web 浏览器环境中工作的，因此您可能需要稍微调整一下。

【讨论】：

好吧，其实我在 jpgjs 上开了一个问题：github.com/notmasteryet/jpgjs/issues/40。它部分有效，因为结果与 Canvas 中的 RGB 字节数组不完全相同（仍在调查为什么......）

我已经用更多信息更新了jpg.js 问题，并在此处发布了一个在线演示：parisilabs.com/colors2 显示结果。

看起来你几乎拥有它，只是一些细微的变化。我注意到在您的代码 (process_image) 的画布版本中，您在读取字节 ctx.drawImage(img, 0, 0, 200, 200) 之前缩小了图像。但是，我在上面的评论中的示例中没有看到相同的缩放代码。也许这可以解释差异？

我检查了代码，终于意识到我是用画布调用MMCQ.quantize(pixelArray, 5)，而用jpg.js调用MMCQ.quantize(pixelArray, 8)，整数是var cmap = MMCQ.quantize(myPixels, maxColors);。感谢您的帮助，现在我们似乎通过XHttpRequest 运行了Leptonica MMCQ！只要！ - 现在在这里查看parisilabs.com/colors2