- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
读者注意事项:这是一个很长的问题,但需要背景知识才能理解所提问题。
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;" 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 - 参见 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 ,但这也使用了:
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来自 CocoaControls 的@AaronBrethorst。
尽管这可以通过原生到 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)通过 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 的情况下生成 RGB 图像的主色 <canvas/>
, 但在来自图像的 ByteArray
的纯 JavaScript 中用 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 上找到完整示例,
最佳答案
canvas 元素被用作将图像解码为 RGBA 数组的便捷方式。您还可以使用纯 JavaScript 库来进行图像解码。
jpgjs是一个 JPEG 解码器和 pngjs是PNG解码器。看起来 JPEG 解码器将按原样与 TVJS 一起工作。然而,PNG 解码器看起来像是为在 Node 或 Web 浏览器环境中工作而设计的,因此您可能需要稍微调整一下。
关于javascript - 使用 XMLHttpRequest 为 RGB 图像生成主色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33312362/
我拦截了一个数据包并提取了有效载荷。此有效负载是压缩的 jpeg 字节流数据(例如,将此数据分配给 unsigned char *payload )。我知道如果我有一个 FILE 指针,那么我可以使用
假设我们有一个单 channel 图像 (5x5) A = [ 1 2 3 4 5 6 7 8 9 2 1 4 5 6 3 4 5 6 7 4 3 4
关闭。此题需要details or clarity 。目前不接受答案。 想要改进这个问题吗?通过 editing this post 添加详细信息并澄清问题. 已关闭 2 年前。 Improve th
我有一个 RGB LED 并且有 9、10、11 的引脚和接地的引脚。已为 R、G 和 B 提供电阻器。 当我这样做时: analogWrite(r, 255); // I see a red c
我想知道如何从像素中获取颜色作为 RGB 整数,并在需要时进行转换。另外,如何利用差异来确定一个像素是否比另一个像素更亮或更暗。 最佳答案 简单: rgb_int = rgb_tuple[0] <<
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 3 年前。 Improve
我的目标是找到与数组中的 RGB 相比最接近的 RGB 匹配项。我已经创建了一个循环遍历图片中每个像素的函数。我现在唯一需要做的就是找到图片中每个像素最接近数组颜色的颜色。 $colors = arr
将 YUV 文件转换为 RGB 文件时出现问题。完成后,我无法使用 GIMP 或其他查看器打开 .rgb 文件,但我成功打开下载的 .rgb 文件。请告诉我RGB文件的结构是什么? (它是否包含标题?
我正在开发一个程序,在该程序中我获取图像的一部分并计算该图像的平均 RGB。当我计算它时,我得到完全不同的值,就好像我要使用内置函数一样。当我测试我的数字并将它们放入 RGB 颜色图表时,它们会关闭,
我正在尝试无损压缩图像,为了利用规律性,我想将图像从 RGB 转换为 Y'CbCr。 (我所说的 RGB 和 Y'CbCr 的具体细节在这里并不重要;RGB 数据由三个字节组成,我有三个字节来存储结果
我有一个应用程序可以生成一堆 jpg,我需要将这些 jpg 转换为 webm 视频。我正在尝试将 jpeg 中的 rgb 数据放入 vpxenc 示例中。我可以在输出视频中看到原始 jpg 的基本形状
我不太熟悉位移位,所以我有以下问题。我使用下面的函数(在别处找到)从 YUV 解码为 RGB int 数组。 现在我想调整红色或绿色或蓝色值来创建一些自定义滤镜效果。我需要检索 R 值、G 值和 B
在下面的代码片段中,我试图在 Visual C++ 中检索像素的 RGB 值,然后将相同的 RGB 值设置回相同的像素。也就是说,这只是一个测试。但是,当我这样做时,生成的图像相似但颜色错误/关闭。生
我试图在 上将 RGB 颜色从蓝色 (rgba(0,0,255)) 转换为红色 (rgba(255,0,0)) >JS mouseenter,渐进式。 因此,每次鼠标进入一个元素时,它都会“增加”其背
我需要根据像素的 RGB 颜色创建一个 Color 对象(读取 PNG 文件的 BufferedImage 对象,BufferedImage 颜色空间为 BufferedImage.TYPE_4BYT
我正在编写一段代码,它必须从 RGB 图像转换为 rgb 标准化空间。我已经使用 for 格式使用它,但它运行速度太慢,我需要评估大量图像。我正在尝试矢量化完整功能以加快它的速度。我现在有以下内容:
我想在多种光照条件下获取图像的 RGB 值。为了获得某种中性场景,我想使用一些预定义图像的 RGB 值对 RGB 值进行归一化。 让我解释一下。我有 6 张预定义图像,我知道它们的确切平均 RGB 值
将平行四边形((RGB)点的二维数组)投影到三角形((RGB)点的二维数组)(在我的特定情况下,将矩形投影到具有相同边长的直角三角形)的伪代码算法是什么(等腰),在我的例子中,斜边的大小与矩形的最大边
假设我有一张摄影底片扫描为 RGB 图像,我正试图找到一种算法将颜色值转换为 RGB 正片。 由于橙色偏差 (http://photo.net/learn/orange-negative-mask),
我已成功将图像转换为灰度图像,我想将灰度图像恢复为 RGB 图像。请帮忙。提前致谢。 -(UIImage *) toGrayscale { const int RED = 1;
我是一名优秀的程序员,十分优秀!