【发布时间】：2021-04-20 22:11:11
【问题描述】：
基本上，我想要实现的是用其他自定义颜色交换/替换图像中已经上传到画布上的颜色。正如您在所附图片中看到的那样，我的画布设计师上传了图片，设计师的左下角有来自图像的带有项目符号的颜色（图像中存在带有项目符号的颜色），上面是我的自定义调色板。
这是我在将图像上传到画布后交换/替换图像颜色的步骤
- 将图像上传到画布
- 点击画布上上传图片的颜色复选框（例如，用图片中显示的复选框选中紫色）
- 单击自定义调色板中的任何颜色（例如图像中显示的黄色）以替换图像中的颜色（例如，紫色应替换为图像中的黄色）
这是迄今为止我对像素操作所做的工作。在选中图像中的颜色框后单击自定义颜色，就会触发以下部分
jQuery('ul').on('click','li.licolors',function() {
console.log("licolors");
var activeObject = canvas.getActiveObject();
if (activeObject && (activeObject.type === 'path')) {
activeObject.set("stroke",jQuery(this).css('background-color'));
activeObject.dirty = true;
canvas.renderAll();
updateCanvasState();
}
else if(activeObject && (activeObject.type === "image")){
if($('.checkboxlicolorsfromimage').is(':checked')){
var colorfromimage = $('.checkboxlicolorsfromimage').val().split(",");//splitting color of checked checkbox purple rgb(83,70,128,255)
var Rcfi = colorfromimage[0];//Red from image
console.log(Rcfi);
var Gcfi = colorfromimage[1];//Green from image
console.log(Gcfi)
var Bcfi = colorfromimage[2];//Blue from image
console.log("bcfi"+Bcfi);
var Acfi = colorfromimage[3];//Alpha from image
var colortoimage = getRGB(jQuery(this).css('background-color'));//this variable holds rgbvalue (yellow color rgb(255, 205, 0)) which I have to apply to the image
var Rcti = colortoimage.red;//Red apply to image
console.log(Rcti);
var Gcti = colortoimage.green;//Green apply to image
console.log(Gcti);
var Bcti = colortoimage.blue;//Blue apply to image
console.log(Bcti);
var target = new Image();
target.src = canvas.toDataURL();
canvas.getContext('2d').drawImage(target,0,0);
const imageData = canvas.getContext('2d').getImageData(0, 0, target.width, target.height);
for (var i = 0; i < imageData.data.length; i += 4) {
if(parseInt(imageData.data[i]) == parseInt(Rcti)){console.log(imageData.data[i]);
imageData.data[i] = Rcfi;//Red
console.log(Rcfi);
}
if(parseInt(imageData.data[i + 1]) == parseInt(Gcti)){console.log(imageData.data[i + 1]);
imageData.data[i + 1] = Gcfi;//Green
console.log(Gcfi);
}
if(parseInt(imageData.data[i + 2]) == parseInt(Bcti)){console.log(imageData.data[i + 2]);
imageData.data[i + 2] = Bcfi;//Blue
console.log(Bcfi);
}
}
canvas.getContext('2d').putImageData(imageData, 0, 0);
activeObject.dirty = true;
canvas.renderAll();
updateCanvasState();
}
}
});
我没有收到任何错误或警告，我可以在控制台中看到我能够运行上述代码，但它没有在画布上已上传的图像中交换我的颜色。
- 是否可以在图像上传到画布后交换/替换图像中的颜色？然后用我们自己的颜色交换/替换特定的颜色通道
- 我发现的大部分参考资料都在图片
.onload上 https://pictureelement.github.io/html5tech/canvas-pixel-manipulation-and-animations.html https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas https://www.tutorialspoint.com/Change-colour-of-an-image-drawn-on-an-HTML5-canvas-element
【问题讨论】：
-
你试过用调试器调试代码吗？
-
您是否想要进行精确的颜色匹配 - 因为它看起来好像您的图像在颜色方面非常复杂。
-
是的，通过在我的浏览器控制台中放置断点来调试它，我可以看到我的 console.logs 在控制台中打印像素
-
我的几块钱不禁对您已正确更新画布的可能性视而不见，但不知何故又用
canvas.renderAll或updateCanvasState调用它。你试过绝育它们吗？我所期待的最后一件事是图像数据被放回 - 我不熟悉的其他东西，所以它是我的主要嫌疑人。 -
是的，我相信应该可以用我的自定义颜色像素替换特定的颜色像素，不确定是否仅在图像为
.onload时有效，或者在上传到画布后有效
标签： javascript html jquery canvas pixel