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

Question

我正在研究图像颜色量化算法。我找到了这个 link

其中提出了 javascript（一种我从未研究过的语言）改进的中值切割算法的实现。但是演示只显示了十种主色。

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

编辑 1

这个问题不是关于颜色量化算法，而是我需要在 Color Thief 项目中更改什么以显示修改后的图像。假设，当我单击 'Click' 按钮时，我想在将值 10 添加到所有像素后显示图像。

Answer 1

我不知道页面的内容。但是如果我理解正确的话，你应该开始研究 jQuery 来操纵图像的事件（检查、动画等）。

enter link description here

这是我在 jquery 中为 'color thief'

找到的示例

enter link description here

Answer 2

这个，我专门为你做的。

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

为此，我使用了 color-thief and nearest-color。

基本上，您想生成一个偷色的调色板，然后循环每个像素并获得与该像素的颜色相比最接近的调色板值。

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

/* 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);

}

结果，这张图片：

变成这个图像：

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

How to change this javascript code to show a modified image?

javascript

color-thief

编辑 1