如何改变 Javascript/Html 画布图像的色调答案

【问题标题】：How Change Hue of Javascript/Html Canvas Image如何改变 Javascript/Html 画布图像的色调
【发布时间】：2020-09-18 11:10:17
【问题描述】：

我有一个由 16*16 瓷砖组成的 spritesheet 图像。我已经有了一个很好的加载系统，并且我已经在不丢失纵横比的情况下处理了它们。问题是我想获得该表的 16 * 16 平铺，复制它，然后将新图像的色调更改一些量。

我想我有复制工作，但这是我所有的代码

let temp = document.createElement('canvas').getContext('2d');

temp.drawImage('spritesheet.png',0,0)

let pixels = temp.getImageData(0, 0, 16,16);

//manipulate them so that the hue is changed (can't find code for)

let Shifted = new Image();
Shifted.src = temp.canvas.toDataUrl("image/png");

【问题讨论】：

标签： javascript html image-processing html5-canvas

【解决方案1】：

QA 很有用（解释如何更改图像颜色）。否则，可以将画布过滤器应用于图像，article 详细演示了它。

链接中的示例：

var gradientColors = createGradient('#0096ff', '#ff00f0');
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
applyGradient(imageData.data);

for (var i = 0; i < data.length; i += 4) {
  // Get the each channel color value
  var redValue = data[i];
  var greenValue = data[i+1];
  var blueValue = data[i+2];

  // Mapping the color values to the gradient index
  // Replacing the grayscale color value with a color for the duotone gradient
  data[i] = gradientColors[redValue].r;
  data[i+1] = gradientColors[greenValue].g;
  data[i+2] = gradientColors[blueValue].b;
  data[i+3] = 255;
}

【讨论】：