如何使用javascript填充图像内的透明区域？

Question

我用 Konvajs 为 PNG 图像添加了一个白色边框

konvajs 链接

我想将白色边框内的透明区域变为白色。 所以我想把车窗漆成白色。 （红色区域是透明的。）

预期结果：

Answer 1

您可以做的一件事是将图像转换为 SVG。

然后，您将为您的车窗提供一些path 。 之后您可以在 JS 中更改 SVG 类的样式。

Answer 2

要解决您想要背景颜色为白色的问题。 作为您的链接，有一个名为removeTransparency的函数，它使图像背景颜色为白色。

      // make all pixels opaque 100% (except pixels that 100% transparent)
      function removeTransparency(canvas) {
        var ctx = canvas.getContext('2d');

        var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        var nPixels = imageData.data.length;
        for (var i = 3; i < nPixels; i += 4) {
          if (imageData.data[i] > 0) {
            imageData.data[i] = 255;
          }
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.putImageData(imageData, 0, 0);
        return canvas;
      }