3

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

4

4 回答 4

2

要做你想做的事，你需要使用getImageData并putImageData查看mdn 以获得关于像素操作的解释。

这是一些示例代码

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);​

示例演示

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

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

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

于 2012-06-04T15:10:49.257 回答
1

您可以使用<canvas>原始像素访问进行像素操作

  • 读取像素

  • 检查它是否满足条件（不透明，alpha = 0）

  • 用纯色替换像素

https://developer.mozilla.org/En/HTML/Canvas/Pixel_manipulation_with_canvas的像素操作资源<canvas>

于 2012-06-04T08:45:00.560 回答
1

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

于 2012-06-04T15:23:51.730 回答
0

画布 API 具有诸如“仅在原始图像中不透明的像素上绘制”之类的合成方法。这比处理图像数据更快，也避免了原始权限问题。

代码笔示例

您想要的复合操作是source-in. 画布仅在红色矩形和透明 PNG 重叠的地方涂成红色。其他一切都变得透明。

HTML：

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

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

Javascript：

var color = '#FF0000';

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var textureURL = 'http://i.imgur.com/LWHZV8v.png';
var textureIMG = new Image();
textureIMG.src = textureURL;

textureIMG.onload = function(){
  canvas.width = textureIMG.width;
  canvas.height = textureIMG.height;        
  ctx.drawImage(textureIMG,0,0);
};


window.paintNontransparent = function() {
  ctx.globalCompositeOperation = "source-in";
  ctx.fillStyle = color;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

MDN 参考

于 2015-05-19T16:17:57.047 回答