时间戳

首页 > 解决方案 > 画布将图像拆分为 rgba 组件

javascript - 画布将图像拆分为 rgba 组件

问题描述

我正在尝试将黑白图像拆分为其 RGB 组件并偏移每个图层，将其设置为叠加。这个想法是让一个英雄图像稍微不合时宜并随机移动它。

我想知道这实际上是否是解决此问题的正确方法。

如果我敢在函数中添加控制台日志以查看哪里出错，我倾向于使浏览器崩溃。

有没有人在浏览器中进行过这种操作，是否可行？

https://github.com/Julieslv/image-shift/blob/master/index.js

标签： javascriptimage-processingcanvashtml5-canvas

解决方案

##将图像分割成RGBA通道

首先请注意，您不能将通道与图像分开。您只能将不需要的频道设置为零。但是，将 Alpha 通道设置为零将自动将所有通道归零。因此，您必须保留 Alpha 通道。

＃＃＃复制图片

要复制图像，请创建第二个画布并将原始图像绘制到上面。

以下功能将做到这一点

function copyToCanvas(image) {
    const can = document.createElement("canvas");
    can.width = image.naturalWidth || image.width;
    can.height = image.naturalHeight || image.height;
    can.ctx = can.getContext("2d");
    can.ctx.drawImage(image, 0, 0);
    return can;
}

###删除频道数据

两个从先前方法复制的图像中删除不需要的通道数据需要两个步骤。

  1. 使用复合操作"multiply"删除不需要的通道数据。
  2. 上述步骤将 alpha 通道设置为 255。要恢复 alpha，您使用复合操作"destination-in"并将原始图像绘制在新图像上。

以下函数将复制图像，删除不需要的通道数据并保持 Alpha 通道完整。

const channels = {
   red: "#F00",
   green: "#0F0",
   blue: "#00F",
};

function getChannel(channelName, image) {
    const copy = copToCanvas(image);
    const ctx = copy.ctx;
    ctx.fillStyle = channels[channelName];
    ctx.globalCompositeOperation = "multiply";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.globalCompositeOperation = "destination-in";
    ctx.drawImage(image, 0, 0);
    ctx.globalCompositeOperation = "source-over";
    return copy;
}

###获取RGB通道

由于保留了 Alpha 通道，您只需分离出红绿通道和蓝色通道。

使用前面的函数，下面将创建一个保存原始图像和 3 个通道的对象

 function seperateRGB(image) {
     return {
         red: getChannel("red", image),
         green: getChannel("green", image),
         blue: getChannel("blue", image),
     };
 }

###重组渠道

现在通道已经分离，您可以通过首先制作一个与原始图像相同大小的新画布加上您在重新组合图像时添加的任何偏移量来重新组合通道（如果您不添加回 alpha）。

function createCanvas(w, h) {
    const can = document.createElement("canvas");
    can.width = w;
    can.height = h;
    can.ctx = can.getContext("2d");
    return can;
}

然后将第一个通道（可以是 3 个中的任何一个）绘制到新画布上。然后使用复合操作绘制其他两个通道"lighter"。然后使用复合操作恢复 alpha"destination-in"

const RGB = seperateRGB(image);
const recombined = createCanvas(RGB.red.width, RGB.red.height);
const ctx = recombined.ctx;

ctx.drawImage(RGB.red, -2, -2);
ctx.globalCompositeOperation = "lighter";
ctx.drawImage(RGB.green, 0, 0);
ctx.drawImage(RGB.blue, 2, 2);
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(image, 0, 0);
ctx.globalCompositeOperation = "source-over";

＃＃全部完成

画布元素recombined保存重新组合的图像，其中绿色和蓝色通道偏移 2 个像素并恢复原始 alpha。

请注意，您不需要恢复 alpha。如果某些通道偏移，则恢复 alpha 将删除一些非重叠像素。

推荐阅读