在一個畫布中更改多個圖像的顏色

我想出瞭如何更改畫布的顏色，但是當我在畫布中放置多個圖像時，我遇到了問題，它沒有出現。我只有一個出現的圖像。這是代碼。在一個畫布中更改多個圖像的顏色

這是當我加載在 '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"; 

}

來源

2017-08-03 yasmina jaaouane

由於我不是Canvas類似於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);後，所有三張照片都可見（請參閱我的示例）。

來源

2017-08-03 12:20:34 reporter

謝謝你的回答，但我有我的圖像下的灰色矩形我需要刪除那些矩形...這裏是結果的鏈接 https://ibb.co/jt2GGa –

@yasminajaaouane此要求是/是不是你問題的一部分。 – reporter

根據https://www.w3schools.com/colors/colors_hsl.asp它可能是一個飽和問題，因爲這個屬性的0％意味着圖像變得灰暗。 – reporter

在一個畫布中更改多個圖像的顏色

回答

相關問題