跨浏览器创建蒙版

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

我没有标准图像，所以剪辑不起作用。我可能不得不提前把所有东西都渲染出来，这会使我的工作呈指数级增长，但是你要处理你的问题，对吗？

我也希望能够从JavaScript激活这个东西。：/

谢谢，如果你能提供支持。

2011-09-25 Brian K.

你将不得不更加具体地了解你想做什么。你需要解决什么**具体问题？一些HTML和CSS会很好... –

一个蒙版是一个黑白图像，覆盖另一个图像，使其部分不可见，其他部分可见。我只需要知道是否有方法在浏览器中执行此操作，但显然不是。我想我正在考虑在SWF中做这件事，如果我希望它能够从一开始就跨浏览器兼容，但这根本不是很理想。有没有办法做面具或没有。我不需要提供代码。 –

好吧，如果你想简单地“掩盖”图像的一部分，搜索“CSS雪碧”。这就是为什么我想知道你是否可以提供代码。这也可以很容易地使用JavaScript更改。所以，如果这是你所追求的，我可以提供一个解决方案。 –

我只是要跳过CSS变种赞成这样的：http://gumonshoe.net/NewCard/MaskTest.html

我获得了JavaScript类从另一个网站教程：

工作面具的示例： http://gumonshoe.net/js/canvasMask.js

它读取图像数据，并从掩模适用阿尔法像素到目标图像：

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;  
    } 
}

来源

2011-09-26 17:32:43

刚刚送走我的头顶 - 和没有实际问题从您为我们解决 - 这里的完成你想要的一个可行的办法...

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属性。

它目前的布局方式，则需要两个图像：图像本身在其所有的荣耀，和面具。

您将完成“蒙版效果”的方式是让蒙版图像成为与其容器的背景相匹配的静态纯色 - 即白色，黑色等。

Kapeesh？这将适用于所有浏览器，这就是你所要求的。 background-clip属性具有-webkit和-moz选择器，但在IE或者（据我所知）Opera浏览器中不支持。

来源

2011-09-26 08:45:08 Ben

如果我没有将多个图像放在一起工作，但是想法是隐藏图像后面没有一个纯色。这就是为什么口罩通常很棒。 –

这是我的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个图像文件作为背景，并将其设置为不重复周围，因为这有点藐视的地步。
我们定义如何在固定宽度和高度的“mask”（div）内“移动”图像。
作为参考，我已经添加了JavaScript，您需要在动态掩码之间切换。我在大约10秒内写完了这些，如果你愿意的话，你可以写一些更优雅的东西。
添加链接onclick = events
最后，将div＃imagemask添加到正文。

鉴于我不知道你的图像文件的宽度或高度或它的目标掩码，你必须对这段代码做一些实质性的修改。但你的想法:)

来源

2011-09-26 12:16:54

肯定是一种做我需要的方式，但我发现了一种更优雅的方式来完成上述操作，完全符合我的需求，而不会将图像分解为各种组件。不幸的是，它需要

跨浏览器创建蒙版

回答

相关问题