JavaScriptキャンバス透明イメージを暗くする

Question

イメージがあります。私はctx.drawImageで描画しています。透明です。私はrgba（0,0,0,0.5）でfillRectを使用しているのでイメージを暗くしたいが、これはイメージの透明部分も暗くする。だから、私はctx.globalCompositeOperation = 'destination atop'を使ってctx.saveと復元を使うことを検討していますが、これでキャンバスの背景が白くなり、画像/塗りつぶしの背景だけが表示されます。後

：ctx.globalCompositeOperation = '先の上' または 'ソースの' 前

ここ

は私のコードです：

/*above is drawing the background, I only want to merge the fillRect with the drawImage*/ 
ctx.save(); 
ctx.drawImage(o.image, x, y); 
ctx.fillStyle = 'rgba(0,0,0,'+amount+')'; 
ctx.globalCompositeOperation = 'source-in'; 
ctx.fillRect(x, y, w, h); 
ctx.globalCompositeOperation = 'source-over'; 
ctx.restore(); 

Answer 1

あなたが何をしているのかわからないちょうど推測する。

はその後

ctx.globalCompositeOperation = "source-over"; 

01デフォルトのコンプ状態を復元アルファ

ctx.globalCompositeOperation = "destination-in"; 
ctx.drawImage(image,0,0); 

を復元するために、次に画像

ctx.globalCompositeOperation = "multiply" 
ctx.fillStyle = "rgb(128,128,128)"; // dest pixels will darken by 
            // (128/255) * dest 
ctx.fillRect(0,0,image.width,image.height) 

を暗くする

ctx.globalCompositeOperation = "source-over"; // in case not set 
ctx.drawImage(image,0,0); 

使用 "乗算" 透明画像を描画します

暗くなり画像の例。上記の方法で左の画像が暗くなります。右の画像は元の暗い画像ではありません。背景色はキャンバスの下の色です。

 
    
 
const ctx = canvas.getContext("2d"); 
 

 
// create an image to darken 
 
const image = document.createElement("canvas"); 
 
image.width = 150; 
 
const ctx1 = image.getContext("2d"); 
 
ctx1.beginPath() 
 
ctx1.fillStyle = "#0F0"; 
 
ctx1.strokeStyle = "#FA0"; 
 
ctx1.lineWidth = 20; 
 
ctx1.arc(75,75,50,0,Math.PI*2); 
 
ctx1.fill(); 
 
ctx1.stroke(); 
 

 
ctx.globalCompositeOperation = "source-over"; // in case not set 
 
ctx.drawImage(image,0,10); 
 
ctx.globalCompositeOperation = "multiply" 
 
ctx.fillStyle = "rgb(128,128,128)"; // dest pixels will darken by 
 
            // (128/255) * dest 
 
ctx.fillRect(0,10,image.width,image.height) 
 
ctx.globalCompositeOperation = "destination-in"; 
 
ctx.drawImage(image,0,10); 
 
ctx.globalCompositeOperation = "source-over"; 
 

 
ctx.font = "16px arial"; 
 
ctx.fillStyle = "black"; 
 
ctx.fillText("Darkened image",10,14); 
 
ctx.drawImage(image,150,10); 
 
ctx.fillText("Original image",160,14);

canvas { border : 2px solid black; }

<canvas id="canvas"></canvas>

あなたはすでにあなたが画像を暗くして、キャンバスに描くために、そのイメージを使用するためにオフスクリーンキャンバスを使用する必要がありますキャンバス上のピクセルのコンテンツを持っている場合。

// create an image to hold darkened copy of image 
const dImage - document.createElement("canvas"); 
dImage.width = image.width; 
dImage.height - image.height; 
const dctx = dImage.getContext("2d"); 
dctx.drawImage(image,0,0); 

// apply darkening to dctx as shown in answer above. 

ctx.drawImage(dImage,0,0); // draws darkened image on canvas