在一个画布中更改多个图像的颜色答案

【问题标题】：Changing the color of multiple images in one canvas在一个画布中更改多个图像的颜色
【发布时间】：2017-08-03 09:45:08
【问题描述】：

我想出了如何更改画布颜色的方法，但是当我在画布中放置多个图像时出现问题，它不会出现。我只出现了一张图片。这是代码。

这是我在“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";

这是改变我的画布颜色的功能
（代码改编自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";

}

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

因为我不熟悉 Canvas 对象和来自提问者的不完整代码示例，所以我创建了自己的示例。之后，我逐步运行每一行并创建了一个运行示例：

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

在我看来，错误出现在函数 changeColor() 的最后三行：

context.globalCompositeOperation = "destination-in";
context.drawImage(img, x, y, width, height);
context.globalCompositeOperation = "source-over";

删除context.drawImage(img, x, y, width, height);这一行后，所有三张图片都可见（参见我的示例）。

【讨论】：

感谢您的回答，但我的图像下方有灰色矩形，我需要删除这些矩形...这是结果的链接ibb.co/jt2GGa
@yasminajaaouane 此要求是/不是您问题的一部分。
根据w3schools.com/colors/colors_hsl.asp，这可能是饱和度的问题，因为该属性的 0% 意味着图像呈现灰色阴影。