CodePen示例

Question

您是否知道任何好的解决方案（也可以基于画布），这使得开发人员能够在非透明区域（如遮罩）中更改png图像的颜色（填充十六进制颜色）？我需要透明区域来改变颜色（或背景图像），这就是为什么它必须不受影响。

Answer 1

要执行您想要的操作，您需要使用getImageData和putImageData结帐mdn for an explanation on pixel manipulation。

下面是一些示例代码

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

canvas.height = canvas.width = 135;
ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 135, 135),
    pix = imgd.data,
    newColor = {r:0,g:100,b:200};

for (var i = 0, n = pix.length; i <n; i += 4) {
    var r = pix[i],
            g = pix[i+1],
            b = pix[i+2];

        if(r == 216 && g == 6 && b == 6){ 
            // Change the red to whatever.
            pix[i] = newColor.r;
            pix[i+1] = newColor.g;
            pix[i+2] = newColor.b;
        }
}

ctx.putImageData(imgd, 0, 0);

<强> Example demo

使用上面的代码，您可以使用

检查fuschia

if(r == 255 && g == 0 && b == 255)

然后只需将newColor更改为替换颜色。

Answer 2

您可以使用<canvas>原始像素访问

进行像素操作

读入像素
检查它是否符合标准（不透明，alpha = 0）
用纯色替换像素

<canvas> https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas

的像素处理资源

Answer 3

您可以使用所需的颜色填充图像/区域，然后在其上绘制png。

Answer 4

canvas API具有合成方法，例如“仅绘制原始图像中不透明的像素”。这比操纵图像数据更快，也避免了原始权限问题。

CodePen示例

您想要的复合操作是[DEBUG] org.jhipster.app.security.Http401UnauthorizedEntryPoint - Pre-authenticated entry point called. Rejecting access java.lang.AssertionError: Status Expected :200 Actual :401。仅当红色矩形和透明PNG重叠时，画布才会被涂成红色。其他一切都变得透明。

HTML：

source-in

使用Javascript：

<canvas id="canvas" width="800" height="400"></canvas>

<a href="javascript:paintNontransparent()">paint non-transparent regions red</a><br>

MDN reference

如果PNG文件区域不透明，则将其着色

4 个答案:

CodePen示例