html画布中图像的主色转换

2022-01-17 00:00:00 canvas jquery javascript html5-canvas

在使用画布工作/学习数小时后，我设法获得了图像克隆和像素，现在我让用户从颜色光谱中选择一种颜色，并且我的函数中有该颜色十六进制:

After working/studying hours with canvas i have managed to get the image clone and it's pixels now i have made the user select a color from a color specterm and i have that color hex in my function :

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个)，并且当颜色选择它克隆到画布上的图像.
在这里，我试图用用户选择的颜色替换最大颜色来克隆图像..

now two tasks are getting in way,
1. How do we extract the dominant color from data ?
2. How do we convert that dominant color to the color we got in function ? for live working example i have link given at end
NOTE: Select the images (any last 3) from left side of the product image and and when color is choose it clones the image to the canvas.
Here i am trying to clone the image with replacement of maximum color with the color user selected..

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 在图像的左侧，当我们选择相似的图像时，它们在图像的底部中心有更改颜色"选项.这正是我想要做的.

*****EDIT*****
My problem is not very complex i think i have this image enter image description here
so we can see clearly that the dominant color is grey, by any method i am just trying to replace that color with the new color i have in my function move and draw that image with the new color. The image from where i have taken and shows another example : http://www.art.com/products/p14499522-sa-i3061806/pela-silverman-colorful-season-i.htm?sOrig=CAT&sOrigID=0&dimVals=729271&ui=573414C032AA44A693A641C8164EB595 on left side of image when we select the similar image they have option "change color" at the bottom center of image. This is what exactly i'm trying to do.

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

So now i tried to read the image 1x1 and this is what i get in the console when i log it(particular for the image i have shown) :

[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…]

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

So it maybe the very first start from top left corner, i guess it need to be iterated over whole image and this is what i get when i iterated over whole image:

[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 中有用户值，需要寻找应该放置该值的位置

Is this iteration right ? If yes, it seems to be now counting and replacing the dominant color and i'm blank here but i have now user value in rgb, need to look for places where that value should be placed

推荐答案

给你.当我说您找到的链接将是合适的时，看起来我之前提供了错误和误导性的信息.对不起！

Here you go. It looks like I gave bad and misleading information earlier when I said that the link you'd found was going to be appropriate. sorry!

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

Basically, you needed to use the multiply composition mode. Here's a demo for you to try on. Clicking the 3rd image picks a new colour.

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'/>

相关文章