在一个画布中更改多个图像的颜色 [英] Changing the color of multiple images in one canvas
本文介绍了在一个画布中更改多个图像的颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想出了如何改变画布的颜色，但是当我在画布上放置多个图像时，我不知道该如何显示。我只有一个出现的图像。这是代码。
这是我在'canvas1'中加载我的图片的时候
var image01 = new Image（）;
var image02 = new Image（）;
var image03 = new Image（）;
image01.onload = function（）{
drawImage（this，73，32，249.1，390）;
changeColor（this，0，0，165，73，32，249.1，390）;
image02.onload = function（）{
drawImage（this，1，64，90，335）;
changeColor（this，0，0，165，1,64，90，335）;
}
image02.src =images / Manches / Longue / Slim / Homme / 7C5D5D2D.png;
image03.onload = function（）{
drawImage（this，303，65，90，335）;
changeColor（this，0，0，165，303，65，90，335）;
}
image03.src =images / Manches / Longue / Slim / Homme / 7C5D5D2E.png;
};
image01.src =images / VueDevant / Homme / Droite / 658FFBC6.png;
这是改变画布颜色的函数
来自由K3N发布的答案）：
function changeColor（img，hue，sat，l，x，y，width，height）{
context.clearRect（x，y，width，height）;
context.globalCompositeOperation =source-over;
context.drawImage（img，x，y，width，height）;
var lcombo = false;
if（lcombo）{
context.globalCompositeOperation =color;
context.fillStyle =hsl（+ hue +，+ sat +％，50％）;
context.fillRect（x，y，width，height）;
context.clearRect（x，y，width，height）;
} else {
// adjustlightness
context.globalCompositeOperation = l< 100？ color-burn：color-dodge;
//用于通用滑块，为两个方向产生有效值
l = l> = 100？ 1 - 100：100 - （100 - 1）;
context.fillStyle =hsl（0，50％，+ l +％）;
context.fillRect（x，y，width，height）;
// context.clearRect（x，y，width，height）;
//调整饱和度
context.globalCompositeOperation =饱和度;
context.fillStyle =hsl（0，+ sat +％，50％）;
context.fillRect（x，y，width，height）;
// context.clearRect（x，y，width，height）;
//调整色相
context.globalCompositeOperation =hue; // hue
context.fillStyle =hsl（+ hue +，1％，50％）;
// context.fillRect（x，y，width，height）;
}
// clip
context.globalCompositeOperation =destination-in;
context.drawImage（img，x，y，width，height）;
context.globalCompositeOperation =source-over;
解决方案因为我与Canvas对象不相似，并且来自提问者的代码示例不完整，我创建了自己的示例。在这之后，我一步一步地跑过每一行，并创建了一个运行示例： falsedata-console =truedata-babel =false>
< HTML> <身体GT; < canvas id =myCanvaswidth =700height =700style =border：1px solid red;>< / canvas> < script type =text / javascript> var canvas = document.getElementById（'myCanvas'），context = canvas.getContext（'2d'）; var image01 = new Image（）; var image02 = new Image（）; var image03 = new Image（）; image01.onload = function（）{changeColor（image01,0,0,165,73,32,249.1,390）; image02.onload = function（）{changeColor（image02，0，0，165，1,64，90，335）; } image02.src =https://1.f.ix.de/scale/geometry/360x202/q75/imgs/09/2/2/5/1/1/9/7/zeroday-d774e8c5b2414e48-b0237d756e9017a9- 39b755ca2936afda.jpeg; image03.onload = function（）{changeColor（image03，0，0，565，303，65，90，335）; } image03.src =https://1.f.ix.de/scale/geometry/696/q75/imgs/18/2/2/5/2/1/4/1/autofly-010b77473b49efc6.jpeg ; }; image01.src =https://1.f.ix.de/scale/geometry/336/q75/imgs/18/2/2/5/2/1/4/1/image-1499148077454426-aa28a644b6934a51.jpeg ;函数changeColor（img，hue，sat，l，x，y，width，height）{context.clearRect（x，y，width，height）; context.globalCompositeOperation =source-over; context.drawImage（img，x，y，width，height）; var lcombo = false; if（lcombo）{context.globalCompositeOperation =color; context.fillStyle =hsl（+ hue +，+ sat +％，50％）; context.fillRect（x，y，width，height）; context.clearRect（x，y，width，height）; } else {context.globalCompositeOperation = 1< 100？ color-burn：color-dodge; l = 1> = 100？ 1 - 100：100 - （100 - 1）; context.fillStyle =hsl（0，50％，+ l +％）; context.globalCompositeOperation =饱和度; context.fillStyle =hsl（0，+ sat +％，50％）; context.fillRect（x，y，width，height）; context.globalCompositeOperation =hue; // hue context.fillStyle =hsl（+ hue +，1％，50％）; } context.globalCompositeOperation =destination-in; context.globalCompositeOperation =source-over; }< / script> < / body>< / html>
错误发生在函数
changeColor（）的最后三行： context.globalCompositeOperation =destination-in;
context.drawImage（img，x，y，width，height）;
context.globalCompositeOperation =source-over;
删除行 context.drawImage（img，x，y，宽度，高度）; ，所有三张照片都可见（请参阅我的示例）。
I figured it out how to change my canvas's color but I have a problem when I put more than one image in my canvas it doesn't appear. I have just one image that appears. Here is the code.
This is when I load my images in 'canvas1'
var image01 = new Image();
var image02 = new Image();
var image03 = new Image();
image01.onload = function() {
drawImage(this, 73, 32, 249.1, 390);
changeColor(this, 0, 0, 165, 73, 32, 249.1, 390);
image02.onload = function() {
drawImage(this, 1, 64, 90, 335);
changeColor(this, 0, 0, 165, 1, 64, 90, 335);
}
image02.src = "images/Manches/Longue/Slim/Homme/7C5D5D2D.png";
image03.onload = function() {
drawImage(this, 303, 65, 90, 335);
changeColor(this, 0, 0, 165, 303, 65, 90, 335);
}
image03.src = "images/Manches/Longue/Slim/Homme/7C5D5D2E.png";
};
image01.src = "images/VueDevant/Homme/Droite/658FFBC6.png";
This is the function for changing the color of my canvas
(code adapted from an answer posted by K3N):
function changeColor(img, hue, sat, l, x, y, width, height) {
context.clearRect(x, y, width, height);
context.globalCompositeOperation = "source-over";
context.drawImage(img, x, y, width, height);
var lcombo = false;
if (lcombo) {
context.globalCompositeOperation = "color";
context.fillStyle = "hsl(" + hue + "," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
context.clearRect(x, y, width, height);
} else {
// adjust "lightness"
context.globalCompositeOperation = l < 100 ? "color-burn" : "color-dodge";
// for common slider, to produce a valid value for both directions
l = l >= 100 ? l - 100 : 100 - (100 - l);
context.fillStyle = "hsl(0, 50%, " + l + "%)";
context.fillRect(x, y, width, height);
// context.clearRect(x,y, width, height);
// adjust saturation
context.globalCompositeOperation = "saturation";
context.fillStyle = "hsl(0," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
// context.clearRect(x,y, width, height);
// adjust hue
context.globalCompositeOperation = "hue"; //hue
context.fillStyle = "hsl(" + hue + ",1%, 50%)";
// context.fillRect(x, y, width,height);
}
// clip
context.globalCompositeOperation = "destination-in";
context.drawImage(img, x, y, width, height);
context.globalCompositeOperation = "source-over";
}
解决方案
Because I'm not fimilar with Canvas objects and an incomplete code example from questioner, I created my own example. After that I ran step by step through each line and created so a running example:
<html>
<body>
<canvas id="myCanvas" width="700" height="700" style="border: 1px solid red;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
var image01 = new Image();
var image02 = new Image();
var image03 = new Image();
image01.onload = function()
{
changeColor(image01, 0, 0, 165, 73, 32, 249.1, 390);
image02.onload = function() {
changeColor(image02, 0, 0, 165, 1, 64, 90, 335);
}
image02.src = "https://1.f.ix.de/scale/geometry/360x202/q75/imgs/09/2/2/5/1/1/9/7/zeroday-d774e8c5b2414e48-b0237d756e9017a9-39b755ca2936afda.jpeg";
image03.onload = function() {
changeColor(image03, 0, 0, 565, 303, 65, 90, 335);
}
image03.src = "https://1.f.ix.de/scale/geometry/696/q75/imgs/18/2/2/5/2/1/4/1/autofly-010b77473b49efc6.jpeg";
};
image01.src = "https://1.f.ix.de/scale/geometry/336/q75/imgs/18/2/2/5/2/1/4/1/image-1499148077454426-aa28a644b6934a51.jpeg";
function changeColor(img, hue, sat, l, x, y, width, height)
{
context.clearRect(x, y, width, height);
context.globalCompositeOperation = "source-over";
context.drawImage(img, x, y, width, height);
var lcombo = false;
if (lcombo) {
context.globalCompositeOperation = "color";
context.fillStyle = "hsl(" + hue + "," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
context.clearRect(x, y, width, height);
} else {
context.globalCompositeOperation = l < 100 ? "color-burn" : "color-dodge";
l = l >= 100 ? l - 100 : 100 - (100 - l);
context.fillStyle = "hsl(0, 50%, " + l + "%)";
context.globalCompositeOperation = "saturation";
context.fillStyle = "hsl(0," + sat + "%, 50%)";
context.fillRect(x, y, width, height);
context.globalCompositeOperation = "hue"; //hue
context.fillStyle = "hsl(" + hue + ",1%, 50%)";
}
context.globalCompositeOperation = "destination-in";
context.globalCompositeOperation = "source-over";
}
</script>
</body>
</html>
In my eyes the mistake was in the last three lines in function changeColor():
context.globalCompositeOperation = "destination-in";
context.drawImage(img, x, y, width, height);
context.globalCompositeOperation = "source-over";
After I deleted the line context.drawImage(img, x, y, width, height);, all three pictures are visible (see my example).
这篇关于在一个画布中更改多个图像的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
