使用XMLHttpRequest为RGB图像生成显性颜色

Question

读者注意事项:这是一个很长的问题,但它需要一个背景来理解问题.

该颜色量化技术通常用于获取主色的图像.其中一个着名的色彩量化库是Leptonica通过修改的中值切割量化(MMCQ)和八叉树量化(OQ) Github的Color-thief by @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正如我们稍后将看到的那样,这就是问题所在.

我最近发现的另一个实现与本文相关联使用imagemagick,awk和kmeans来查找链接到使用python生成令人敬畏的linux桌面主题的图像中的主色.作者发表了一篇关于使用python和k-means来查找在那里使用的图像中的主色的文章(抱歉所有这些链接,但我正在追溯我的历史......).

作者非常高效,并添加了一个我在这里发布的JavaScript版本:使用JavaScript和k-means来查找图像中的主色

在这种情况下,我们正在生成图像的主色,而不是使用MMCQ(或OQ)算法,而是使用K-Means.问题是图像必须是一个:

<canvas id="canvas" style="display: none;" width="200" height="200"></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 - 请参阅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;
  }

因此,您可以通过上下文在Canvas上绘制图像并获取图像数据:

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

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

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);
  };

但是,等等,我们没有<canvas/>元素TVML!

当然,还有像Objective-C ColorCube,DominantColor这样的原生解决方案- 这是使用K-means

和非常漂亮的和可重复使用ColorArt通过@AaronBrethorst从CocoaControls.

尽管这可以通过本地JavaScriptCore桥接器在TVML应用程序中使用 - 请参阅如何将TVML/JavaScriptCore桥接到UIKit/Objective-C(Swift)？

我的目标是完全使这项工作中TVJS和TVML.

最简单的MMCQ JavaScript实现并不需要一个Canvas:看到了MMCQ(修改正中切口量化)的基本的JavaScript端口由尼克·拉比诺维茨,但需要将图像的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的情况下生成RGB图像的主色<canvas/>,但是在图像的纯JavaScript中ByteArray使用XMLHttpRequest？

[更新] 我已将此问题发布到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上有一个完整的例子,

Answer 1

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

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