HTML 画布，使用灰度图像作为遮罩答案

【问题标题】：HTML canvas, use greyscale image as maskHTML 画布，使用灰度图像作为遮罩
【发布时间】：2017-09-01 06:28:02
【问题描述】：

我正在尝试应用蒙版，因为它在 Photoshop 中有效。黑色是透明的，白色是可见的。但是，我认为复合模式不允许这样做。

我只能找到使用 alpha 通道的模式，但我想使用 jpg 来获得较小的文件大小...

【问题讨论】：

标签： javascript html canvas image-masking

【解决方案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";
}

【讨论】：

【解决方案2】：

我尝试运行您的代码，但不幸的是它没有按预期运行。

我也想要这个解决方案。有人能解决吗？

window.onload = function() {

  var img = document.getElementById("img");
  var canvas = document.getElementById("c");
  var ctx = canvas.getContext("2d");
  canvas.width = img.naturalWidth;
  canvas.height = img.naturalHeight;
  ctx.drawImage(img, 0, 0);

  var idata = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data32 = new Uint32Array(idata.data.buffer);
  var i = 0, len = data32.length;
  
  while(i < len) {
        var rgb = idata.data[i++] + idata.data[i++] + idata.data[i++];
    idata.data[i ++]  = rgb / 3;
  }
  ctx.putImageData(idata, 0, 0)
    
}

<img id="img" crossorigin="anonymous" src="https://i.imgur.com/QRGYuWg.png"> ► 
<canvas id="c"></canvas>

【讨论】：