是否有一个很好的解决方案来绘制带有画布叠加颜色的位图?Html5 Canvas overlay
我正在做的是绘制一个独特的颜色为所有不透明像素的位图。 我没有找到任何解决方案,它可能对我有用!
感谢的
是否有一个很好的解决方案来绘制带有画布叠加颜色的位图?Html5 Canvas overlay
我正在做的是绘制一个独特的颜色为所有不透明像素的位图。 我没有找到任何解决方案,它可能对我有用!
感谢的
一种方式做到这一点是遍历每个像素,并更改R/G/B值,你想它的价值。通过跳过alpha值,它只会将不透明的像素更改为所需的颜色。
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d"),
image = document.getElementById("testImage");
ctx.drawImage(image,0,0);
var imgd = ctx.getImageData(0, 0, 128, 128),
pix = imgd.data,
uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.
// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
pix[i] = uniqueColor[0]; // Red component
pix[i+1] = uniqueColor[1]; // Green component
pix[i+2] = uniqueColor[2]; // Blue component
//pix[i+3] is the transparency.
}
ctx.putImageData(imgd, 0, 0);
// Just extra if you wanted to display within an img tag.
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");
我以前没有这样做,但我认为XOR操作可以做到这一点(10年前,XOR和Java小程序做到了这一点).. http://www.whatwg.org/specs/web-apps /current-work/multipage/the-canvas-element.html搜索XOR –