如何更改此javascript代码以显示修改过的图像？

Question

我在玩图像颜色量化算法。我找到了这个链接

彩色盗贼

其中，javascript (一种我从未研究过的语言)实现了一个改进的中值裁剪算法。但是演示只显示了十种主要的颜色。

我想看看量化后的图像是什么样子。在文件src/color-thief.js (第132行)中，调用量化函数。此函数返回一个CMap object，该函数可用于提取主导颜色，并将颜色映射到减少的调色板中的最佳颜色。给定CMap对象，我如何修改原始图像并显示它？

编辑1

这个问题不是关于颜色量化算法，而是我需要改变的颜色盗贼项目，以显示修改后的图像。假设，当我单击“click”按钮时，我想在将10的值添加到其所有像素后显示图像。

Answer 1

我给你做了这个。

我假设您希望将图像的颜色简化为color-thief提供的调色板。

为此，我使用了偷色贼和最近色。

基本上，您想要生成一个偷色者的调色板，然后循环每个像素，得到一个与这个像素的颜色相比较的最近的调色板值。

在码页上查看此解决方案，代码如下：

/* rgbToHex() and leadingZero() functions ripped from nearest-color. */
function rgbToHex(rgb) {
  return '#' + leadingZero(rgb.r.toString(16)) +
     leadingZero(rgb.g.toString(16)) + leadingZero(rgb.b.toString(16));
}

function leadingZero(value) {
  if (value.length === 1) value = '0' + value;   
  return value;
}

/* Initialize an image and the canvas. */
var img = document.getElementById("img");
var canvas = document.getElementById("canvas");

/* When the image is loaded */
img.onload = function(){

  /* Initialize color-thief and get a palette from image. */
  var colorthief = new ColorThief(); 
  var colorthief_palette = colorthief.getPalette(img, 8);
  var palette = {};

  /* Turn color-thief palette to nearest-color-compatible palette. */
  for(var i = 0; i < colorthief_palette.length; i++){
    var r = colorthief_palette[i][0];
    var g = colorthief_palette[i][1]; 
    var b = colorthief_palette[i][2];
    var o = {r: r, g: g, b: b};
    palette["color_" + i] = rgbToHex(o);
  }

  /* Initialize nearest-color */
  var clr = nearestColor.from(palette);

  /* Initialize canvas, draw the image data and hide the default image. */
  var ctx = canvas.getContext("2d");
  canvas.width = img.width;
  canvas.height = img.height;  
  ctx.drawImage(img, 0, 0);
  img.style.display = "none"; 

  var data = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var pixel = data.data;

  /* Loop for each pixel of image. */
  for (var i = 0, n = pixel.length; i < n; i += 4) {

      var r = pixel[i+0];
      var g = pixel[i+1]; 
      var b = pixel[i+2];
      var o = {r: r, g: g, b: b};
      var color = rgbToHex(o);
      var nearest = clr(color);

      pixel[i+0] = nearest.rgb.r;
      pixel[i+1] = nearest.rgb.g;
      pixel[i+2] = nearest.rgb.b;


  } 

  ctx.putImageData(data, 0, 0);

}

因此，这张图片：

​

​

变成这样的图像：

​

Answer 2

我不知道这页的内容。但是如果我正确地理解了你做的事情，你应该开始学习jQuery来操纵事件(检查、动画等等)。影像。

在这里输入链接描述

这是我在jquery中找到的一个用于“色贼”的示例。

在这里输入链接描述