HTML畫布，使用灰度圖像作為蒙版

Question

我正在嘗試在Photoshop中應用蒙版。 黑色是透明的，白色是可見的。 但是，我認為復合模式不允許這樣做。

我只能找到使用alpha通道的模式，但我想將jpg用於較小的文件大小...

Answer 1

使用getImageData和putImageData訪問原始像素數據

您需要手動移動像素。

為此，將圖像加載到畫布上，獲取畫布像素。 轉換為灰度並移至Alpha。 然后將像素放回畫布上。

var mask;
var image = new Image;
image.src = "image name.jpg";
image.onload = function(){
    var canvas = document.createElement("canvas");
    canvas.width = this.width;
    canvas.height = this.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(this,0,0);
    var data = ctx.getImageData(0,0,this.width,this.height);
    var i = 0;
    while(i < data.data.length){
        var rgb = data.data[i++] + data.data[i++] + data.data[i++];
        data.data[i ++]  = rgb / 3;
    }
    ctx.putImageData(data,0,0);
    mask = canvas;
}

加載蒙版后，便是具有alpha通道的圖像副本，其中包含RGB通道的平均值。

使用它

// ctx is the canvas context you want to draw to with the mask

if(mask){
     ctx.globalCompositeOperation = "destination-out";
     ctx.drawImage(mask,0,0);
     ctx.globalCompositeOperation = "source-over";
}