読者への注意: これは長い質問ですが、質問を理解するには背景が必要です。
色の量子化技術は、画像の主要な色を取得するために一般的に使用されます。色の量子化を行うよく知られたライブラリの 1 つは、 Modified Median Cut Quantization ( MMCQ ) および octree quantization (OQ)による Leptonica です。@lokesh による Github のColor-thiefは、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 finddominant colors in imagesにリンクされており、Using python to generate awesome linux desktop theme にリンクしています。著者は、 Python と k-means を使用して、そこで使用されている画像の支配的な色を見つける方法に関する記事を投稿しました (これらすべてのリンクについては申し訳ありませんが、履歴をたどっています...)。
著者は非常に生産的で、ここに投稿する JavaScript バージョンも追加しました: Using JavaScript and k-means to find thedominant colors in images
この場合、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 に 2D 画像描画 API を公開する getContext() メソッドがあるためです - 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;
}
したがって、コンテキストを介してキャンバスに画像を描画し、画像データを取得できます。
ctx.drawImage(img, 0, 0, 200, 200);
data = ctx.getImageData(0, 0, 200, 200).data;
もう 1 つの優れたソリューションは 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 を使用しています。
そして、 CocoaControls の@AaronBrethostによる非常に素晴らしく再利用可能な ColorArt です。
これはネイティブから JavaScriptCore へのブリッジを介して TVML アプリケーションで使用できるという事実にもかかわらず - TVML/JavaScriptCore を UIKit/Objective-C (Swift) にブリッジする方法を参照してください。
私の目的は、これをTVJSand で完全に機能させることですTVML。
最も単純な MMCQ JavaScript 実装はキャンバスを必要としません。Nick Rabinowitzによる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/>方法ByteArrayはXMLHttpRequest?
[更新] この質問をColor-Thief github リポジトリに投稿し、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で利用できるようになりました。