使用Canvas将不透明像素变成白色

发布于 2024-12-19 17:07:43 字数 185 浏览 1 评论 0原文

我正在寻找一种方法来拍摄图像（徽标、应用程序图标等）并使用 javascript/canvas 将它们转换为白色（不包括透明度）。

这是我想要的示例（显然使用静态图像）： http://jsfiddle.net/4ubyj/

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抽个烟儿 2024-12-26 17:07:43

canvas API 具有专门用于“仅在原始图像中不透明的像素上绘制”之类的合成方法。这比弄乱图像数据容易得多。

jsFiddle 示例（现在带有内嵌图像）

向@WilliamVanRensselaer 的初始小提琴致敬。

您想要的复合操作是 source-in，这意味着“仅绘制我试图绘制的不透明部分，这些部分位于正在绘制的图像中的不透明像素之上。”

HTML：

<a href="javascript:doIt()">paint non-transparent regions white</a><br>
<canvas id="canvas" width="600" height="200"></canvas>

Javascript：

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

imgSrc = "http://d.pr/Td69+";
var b = document.getElementsByTagName("body")[0];
var i = document.createElement("img");
i.src = imgSrc;
i.style.setProperty("display", "none");
i.onload = function() {
    ctx.drawImage(i, 0, 0);
}
b.appendChild(i);

window.doIt = function() {
    ctx.globalCompositeOperation = "source-in";

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 600, 200);
}

参考

The canvas API has compositing methods specifically for things like "draw only on pixels that are not transparent in the original image." This is much easier than messing with the image data.

jsFiddle example (now with inlined image)

hat tip to @WilliamVanRensselaer's initial fiddle.

The composite operation you want is source-in, which means "draw the opaque parts of what I'm trying to paint only where they are on top of opaque pixels in the image being drawn upon."

HTML:

<a href="javascript:doIt()">paint non-transparent regions white</a><br>
<canvas id="canvas" width="600" height="200"></canvas>

Javascript:

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

imgSrc = "http://d.pr/Td69+";
var b = document.getElementsByTagName("body")[0];
var i = document.createElement("img");
i.src = imgSrc;
i.style.setProperty("display", "none");
i.onload = function() {
    ctx.drawImage(i, 0, 0);
}
b.appendChild(i);

window.doIt = function() {
    ctx.globalCompositeOperation = "source-in";

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 600, 200);
}

reference

回复收藏 0 原文

写下不归期 2024-12-26 17:07:43

这里有一些可以帮助您入门的东西。如果 alpha 不为零，这基本上会将像素更改为白色，但如果您愿意，您可以进行修改。

示例： http://jsfiddle.net/Q27Qc/

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

// Put something on the canvas (can be an image)
ctx.font = "100px Arial";
ctx.fillText( "Google", 20, 130 );

// Get image data for part of the canvas (to see effects)
var img = ctx.getImageData( 20, 40, 80, 100 ),
    imgData = img.data;

// Loops through bytes and change pixel to white if alpha is not zero.
for ( var i = 0; i < imgData.length; i += 4 ) {
    if ( imgData[i + 3] !== 0 ) {
        imgData[i] = 255;
        imgData[i + 1] = 255;
        imgData[i + 2] = 255;
    }
}

// Draw the results
ctx.putImageData( img, 20, 40 );

Here's something to get you started. This basically changes the pixel to white if the alpha is not zero, you can make modifications if you want though.

Example: http://jsfiddle.net/Q27Qc/

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

// Put something on the canvas (can be an image)
ctx.font = "100px Arial";
ctx.fillText( "Google", 20, 130 );

// Get image data for part of the canvas (to see effects)
var img = ctx.getImageData( 20, 40, 80, 100 ),
    imgData = img.data;

// Loops through bytes and change pixel to white if alpha is not zero.
for ( var i = 0; i < imgData.length; i += 4 ) {
    if ( imgData[i + 3] !== 0 ) {
        imgData[i] = 255;
        imgData[i + 1] = 255;
        imgData[i + 2] = 255;
    }
}

// Draw the results
ctx.putImageData( img, 20, 40 );

回复收藏 0 原文

~没有更多了~