javascript - html Canvas 中图像的主色转换

Question

在使用 Canvas 工作/学习几个小时后，我已经成功获得了图像克隆及其像素，现在我已经让用户从颜色光谱中选择了一种颜色，并且我的函数中有了该颜色十六进制:

move: function (color) {

 // 'color' is the value user selected

var img_id = jQuery(".selected_bg_img").attr("id");

alert(img_id);

var x = 0;
var y = 0;
var width = 409;
var height = 409;


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById(img_id);
ctx.drawImage(img,x,y,width,height);

var imageData = ctx.getImageData(0,0,width,height);

var data = imageData.data;

alert(data);

}

现在有两项任务出现问题，
1.我们如何从数据中提取主色？
2. 我们如何将主色转换为我们在函数中获得的颜色？对于实时工作示例，我在末尾给出了链接
注意:从产品图像的左侧选择图像(任意最后 3 个)，选择颜色后，会将图像克隆到 Canvas 上。
在这里，我尝试克隆图像，并用用户选择的颜色替换最大颜色。

for (var i=0;i<imgData.data.length;i+=4)
{
  imgData.data[i]=255-imgData.data[i];
  imgData.data[i+1]=255-imgData.data[i+1];
  imgData.data[i+2]=255-imgData.data[i+2];
  imgData.data[i+3]=255;
  }

*****编辑*****
我的问题不是很复杂，我想我有这张图片，在此处输入图片描述
所以我们可以清楚地看到主色是灰色，通过任何方法我只是试图用我在函数中移动并用新颜色绘制该图像的新颜色替换该颜色。我拍摄的图像显示了另一个示例: http://www.art.com/products/p14499522-sa-i3061806/pela-silverman-colorful-season-i.htm?sOrig=CAT&sOrigID=0&dimVals=729271&ui=573414C032AA44A693A641C8164EB595在图像的左侧，当我们选择相似的图像时，它们在图像的底部中心有“更改颜色”选项。这正是我正在尝试做的事情。

所以现在我尝试读取图像 1x1，这就是我在记录它时在控制台中得到的内容(特别是我显示的图像):

[166, 158, 152, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…]

所以它可能是从左上角开始的，我想它需要在整个图像上迭代，这就是我在迭代整个图像时得到的结果:

[110, 118, 124, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255…]

我用于迭代的循环是:

var imageData = ctx.getImageData(0,0,width,height);

var data = imageData.data;

for (var i=0;i<data.length;i+=4)
{
  data[i]=255-data[i];
  data[i+1]=255-data[i+1];
  data[i+2]=255-data[i+2];
  data[i+3]=255;
}
console.log(data);

这个迭代正确吗？如果是，它现在似乎正在计算并替换主色，我在这里是空白的，但我现在有 RGB 中的用户值，需要寻找应该放置该值的位置

Answer 1

给你。看来我之前提供了错误且具有误导性的信息，当时我说您找到的链接是合适的。 抱歉!

基本上，您需要使用乘合成模式。 这是一个演示供您尝试。单击第三张图像会选择一种新颜色。

function byId(id){return document.getElementById(id)}
window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	byId('canvas2').addEventListener('click', onCanvasClicked, false);
	colorize('green');
}

function onCanvasClicked(evt)
{
	var newColour = getRandomColour();
	colorize(newColour);
}

function getRandomColour()
{
	return '#' + Math.floor(Math.random() * (Math.pow(2,24)-1)).toString(16);
}

function colorize(colourToUse)
{
	var mask = byId('maskImg');
	var colorImg = byId('colorImg');

	var width = colorImg.naturalWidth;
	var height = colorImg.naturalHeight;

	// draw the mask image to a canvas
	var can = byId('canvas1');
	var ctx = can.getContext('2d');
	can.width = width;
	can.height = height;
	ctx.drawImage(mask, 0, 0);
	
	// colorize the non transparent areas
	ctx.globalCompositeOperation = "source-in";
	ctx.fillStyle = colourToUse;
	ctx.fillRect(0, 0, can.width, can.height);
	
	
	// draw the combined output
	var can2 = byId('canvas2');
	var ctx2 = can2.getContext('2d');
	can2.width = width;
	can2.height = height;
	
	ctx2.drawImage(colorImg, 0, 0);
	ctx2.globalCompositeOperation = 'multiply';
	ctx2.drawImage(can,0,0);
}

body {
  background-color: ivory;
  padding: 20px;
}

canvas 
{
  border: 1px solid red;
  width: 275px;
  height: 275px;
}

.dontShow
{
	display: none;
}

	<img style='width:275px; height:275px' id='colorImg' src='http://cache1.artprintimages.com/images/spp/living_61_70.jpg'/><canvas id="canvas1"></canvas><canvas id='canvas2'></canvas>

	<!-- much easier than using image pre-loaders. onDocLoaded wont be fired until the html with images,script and css are available or have failed to load-->
	<img class='dontShow' id='maskImg' src='http://cache1.artprintimages.com/images/spp/living_61_70_mask.png'/>