跨浏览器创建掩码答案

【问题标题】：Creating masks across browsers跨浏览器创建掩码
【发布时间】：2011-09-27 01:32:43
【问题描述】：

我看到在 webkit 浏览器中有一些方法可以做到这一点，但我没有看到在其他浏览器中做到这一点的方法。这仅仅是一个尚未在所有浏览器中实现的功能吗？

我没有标准图像，所以剪辑不起作用。我可能必须提前渲染所有内容，这将使我的工作呈指数级增长，但你处理你所拥有的，对吧？

我还希望能够从 javascript 激活这些东西。：/

感谢您提供支持。

【问题讨论】：

您必须更具体地说明您想要做什么。您需要解决什么具体问题？有一些 HTML 和 CSS 会很不错...
蒙版是一个黑白图像，它覆盖在另一个图像上，使其一部分不可见，而其他部分可见。我只需要知道是否有办法在浏览器中执行此操作，但显然没有。如果我希望它从一开始就与跨浏览器兼容，我想我正在考虑在 SWF 中执行此操作，但无论如何这根本不是理想的。要么有办法做口罩，要么没有。我不需要提供代码。
好吧，如果您想简单地“屏蔽”图像的某些部分，请搜索“CSS Sprite”。这就是为什么我想知道你是否可以提供代码。这也可以使用 javascript 轻松更改。所以，如果这是您所追求的，我可以提供解决方案。
CSS Sprite 可能会成功。我正在进一步研究它。我有大约 10 张图像需要堆叠在一起，并根据设置屏蔽掉以反映用户选择。他们都适合在一起。口罩目前是黑白的。有时需要口罩，有时不需要。所以我希望能够动态调整图像是否存在以及它的掩码是什么。
我在下面添加了我对这个问题的首选解决方案（CSS Sprites）。试试看，如果这解决了问题，请告诉我。

标签： javascript css image mask

【解决方案1】：

就在我的脑海中 - 而且没有实际问题由我们来解决 - 这是实现您想要的可能的方法......

HTML

<div class="myImage">

    <img src="path_to_image" title="Lorem ipsum" alt="Dolar sit amet" />    

    <div class="myMask">
    </div><!-- /myMask -->

</div><!-- /myImage -->

CSS

.myImage {
    position: relative;
}

.myMask {
    position:absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: url('path_to_masking_image');
}

或者，在 myMask div 中使用 <img />，并从 CSS 中删除 background-image 属性。

按照目前的布局方式，您需要两个图像：图像本身以及面具。

实现“遮罩效果”的方法是让遮罩图像成为与容器背景相匹配的静态纯色 - 即白色、黑色等。

卡皮什？这适用于所有浏览器，这是您所要求的。 background-clip 属性具有 -webkit 和 -moz 选择器，但在 IE 或（据我所知）Opera 等浏览器中不受支持。

【讨论】：

如果我没有将多个图像放在一起可能会起作用，但我的想法是在蒙版图像后面没有一种纯色。这就是为什么口罩通常很棒的原因。

【解决方案2】：

这是我的 2 美分，如果它确实是你想要的 CSS Sprites。

<head>
<style type="text/css"><!--
#imagemask {
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-color: transparent;
    height: 40px;
    width: 40px;
}
.mask1 { background-position: top left; }
.mask2 { background-position: 0 40px; }
.mask3 { background-position: 0 80px; }/* And so on, however your image file is 'layed out' */
--></style>
<script type="text/javascript">
    function mask1(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
    function mask2(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
    function mask3(){ document.getElementById("imagemask").setAttribute("class", "mask1"); }
</script>
</head>

<body>
    <a href="#" onclick="javascript:mask1()">mask 1</a>
    <a href="#" onclick="javascript:mask2()">mask 2</a>
    <a href="#" onclick="javascript:mask3()">mask 3</a>
    <div id="imagemask" class="mask1"></div>
</body>

我们将 div#imagemask 定义为包含 1 个图像文件作为背景，并将其设置为不重复，因为这有点违背要点。
我们定义了如何在具有固定宽度和高度的“掩码”(div) 内“移动”图像。
作为参考，我随后添加了您需要在掩码之间动态切换的 javascript。我用了大约 10 秒的时间写了这篇文章，如果你愿意，你可以写一些更优雅的东西。
使用 onclick= 事件添加链接
最后，将 div#imagemask 添加到正文中。

鉴于我不知道您的图像文件的宽度或高度，或者它的目标遮罩，您必须对此代码进行一些实质性的编辑。但是你明白了:)

【讨论】：

绝对是一种做我需要的方法，但我发现了一种更优雅的方法，如上所述，完全满足我的需求，而不会将图像分解成各种组件。不幸的是，它需要

【解决方案3】：

我将跳过 CSS 变体来支持这个：

工作掩码示例：http://gumonshoe.net/NewCard/MaskTest.html

我从另一个网站教程中获得了一个 javascript 类： http://gumonshoe.net/js/canvasMask.js

它读取图像数据并将蒙版中的 alpha 像素应用于目标图像：

function applyCanvasMask(image, mask, width, height, asBase64) {
    // check we have Canvas, and return the unmasked image if not
    if (!document.createElement('canvas').getContext) return image;

    var bufferCanvas = document.createElement('canvas'),
        buffer = bufferCanvas.getContext('2d'),
        outputCanvas = document.createElement('canvas'),
        output = outputCanvas.getContext('2d'),

        contents = null,
        imageData = null,
        alphaData = null;

    // set sizes to ensure all pixels are drawn to Canvas
    bufferCanvas.width = width;
    bufferCanvas.height = height * 2;
    outputCanvas.width = width;
    outputCanvas.height = height;

    // draw the base image
    buffer.drawImage(image, 0, 0);

    // draw the mask directly below
    buffer.drawImage(mask, 0, height);

    // grab the pixel data for base image
    contents = buffer.getImageData(0, 0, width, height);

    // store pixel data array seperately so we can manipulate
    imageData = contents.data;

    // store mask data
    alphaData = buffer.getImageData(0, height, width, height).data;

    // loop through alpha mask and apply alpha values to base image
    for (var i = 3, len = imageData.length; i < len; i = i + 4) {
        imageData[i] = alphaData[i];
    }

    // return the pixel data with alpha values applied
    if (asBase64) {
        output.clearRect(0, 0, width, height);
        output.putImageData(contents, 0, 0);

        return outputCanvas.toDataURL();
    }
    else {
        return contents;    
    }
}

【讨论】：