跨瀏覽器創建蒙版

我發現在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

肯定是一種做我需要的方式，但我發現了一種更優雅的方式來完成上述操作，完全符合我的需求，而不會將圖像分解爲各種組件。不幸的是，它需要

跨瀏覽器創建蒙版

回答

相關問題