读者须知:这是一个很长的问题,但需要背景知识才能理解所提出的问题。
The 色彩量化技术 https://en.wikipedia.org/wiki/Color_quantization通常用于获取主色图像的。
进行颜色量化的著名库之一是莱普托尼卡 http://www.leptonica.com/通过改进的中值切割量化 (MMCQ) 和八叉树量化 (OQ) http://www.leptonica.com/color-quantization.htmlGitHub 的色彩小偷 https://github.com/lokesh/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
,我们稍后会看到。
我最近知道的另一个实现链接在这篇文章上使用 imagemagick、awk 和 kmean 查找图像中的主色 http://javier.io/blog/en/2015/09/30/using-imagemagick-and-kmeans-to-find-dominant-colors-in-images.html链接到使用 python 生成很棒的 Linux 桌面主题 http://charlesleifer.com/blog/using-python-to-generate-awesome-linux-desktop-themes/。
作者发表了一篇关于使用 python 和 k-means 查找图像中的主色 http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/在那里使用过(对所有这些链接感到抱歉,但我正在追踪我的历史......)。
作者非常高效,还添加了一个 JavaScript 版本,我在这里发布:使用 JavaScript 和 k-means 查找图像中的主色 https://gist.github.com/loretoparisi/c147ca437ab9d5e163b7
在本例中,我们生成图像的主色,不是使用 MMCQ(或 OQ)算法,而是使用 K-Means。
问题是图像也必须是:
<canvas id="canvas" style="display: none;" width="200" height="200"></canvas>
and then
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 简介 http://html5doctor.com/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,色彩调 https://github.com/dannvix/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 这样的原生解决方案彩色立方体 https://github.com/pixelogik/ColorCube, 主色 https://github.com/indragiek/DominantColor- 这是使用 K 均值
非常漂亮且可重复使用ColorArt https://github.com/panicinc/ColorArt作者:Cocoa Controls 的@AaronBrethorst。
尽管事实上这可以通过原生 JavaScriptCore 桥在 TVML 应用程序中使用 - 请参阅如何将 TVML/JavaScriptCore 桥接到 UIKit/Objective-C (Swift)? https://stackoverflow.com/questions/33081565/tvos-tvml-and-objective-c-swift-putting-all-together
我的目标是让这项工作完全在TVJS
and TVML
.
最简单的 MMCQ JavaScript 实现不需要 Canvas:参见MMCQ 的基本 Javascript 端口(改进的中值切割量化) https://gist.github.com/loretoparisi/fe6e5cf889bb2c8f2099 by 尼克·拉比诺维茨 https://gist.github.com/nrabinowitz,但需要图像的 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
?
[UPDATE]我已将这个问题发布到色彩小偷 https://github.com/lokesh/color-thief/issues/86github 存储库,使 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 颜色数组。
[UPDATE]感谢所有的建议,我让它发挥作用。现在可以在以下位置找到完整的示例Github https://github.com/loretoparisi/dominant-colors-xmlhttprequest-example,