将图像转换为黑色和透明(可绘制)- JavaScript/CSS

// 创建一个Canvas元素
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

// 加载图像
var image = new Image();
image.src = 'image.jpg';
image.onload = function() {
  // 设置Canvas的宽高与图像一致
  canvas.width = image.width;
  canvas.height = image.height;

  // 在Canvas上绘制图像
  ctx.drawImage(image, 0, 0);

  // 获取图像的像素数据
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  var data = imageData.data;

  // 遍历每个像素，将其转换为黑色和透明
  for (var i = 0; i < data.length; i += 4) {
    var red = data[i];
    var green = data[i + 1];
    var blue = data[i + 2];

    // 将非黑色的像素设置为透明
    if (red !== 0 || green !== 0 || blue !== 0) {
      data[i + 3] = 0; // 设置透明度为0
    }
  }

  // 将修改后的像素数据重新绘制到Canvas上
  ctx.putImageData(imageData, 0, 0);

  // 将Canvas转换为DataURL，可以用于显示或保存
  var result = canvas.toDataURL();

  // 输出结果
  console.log(result);
};

<style>
  .image {
    filter: grayscale(100%) opacity(0%);
  }
</style>

<img class="image" src="image.jpg" alt="Image">