使用 Javascript/CSS 在 PNG 中绘制所有像素（不包括透明像素）？答案

【问题标题】：Paint all pixels (excluding transparant) in PNG with Javascript/CSS?使用 Javascript/CSS 在 PNG 中绘制所有像素（不包括透明像素）？
【发布时间】：2010-01-24 12:39:19
【问题描述】：

我需要使用 Javascript/CSS 创建 PNG 的剪影。这可能吗？

我尝试了以下方法：使用绝对定位和 z-index 多次堆叠具有较低不透明度的 PNG。这不起作用。

很遗憾，我不能使用 PHP 或其他 Javascript 和 CSS。

我对叠加层等有了一些想法，但我不知道该怎么做。有什么建议吗？

更新：这只需要在 webkit 浏览器中工作，所以你可以带上你的 webkit 技巧！ :)

【问题讨论】：

标签： javascript webkit css paint

【解决方案1】：

在纯 HTML/CSS 中是不可能的。

可以在嵌入式 SVG 中使用 filter（例如 feColorMatrix）将所有通道设置为一种颜色，不透明度除外。

可以在<canvas> 中使用composite operation，例如先绘制图像，然后使用source-out 模式在顶部绘制单一颜色。

可能在 IE 中使用 MaskFilter，使用 MaskFilter 生成覆盖在固定颜色（例如黑色）上的遮蔽颜色（例如白色）。但是我认为你会失去任何可变不透明度的平滑边缘。

这将是很多浏览器嗅探和烦恼。我会尽量避免。

【讨论】：

谢谢，我会试试你的建议。我忘了说它只需要在 webkit 浏览器中工作。
画布合成很棒:)

【解决方案2】：

考虑到你已经用webkit 标记了这个，你应该看看Surfin' Safari blog post about CSS masks。

例如这是你想要的吗？

<!doctype html>
<style>
div {
    width: 215px;
    height: 174px;
    background: black;
    -webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>

【讨论】：

口罩不是我要寻找的。除非我可以屏蔽除透明像素之外的所有彩色像素。