当在元素后面滚动时去饱和图像

Question

我有'这是否可能在画布上'的问题。假设我在页面上有一个固定的div元素，并且它的背景颜色设置为不透明。现在，当另一个元素（图像）在后面滚动时，可以通过顶部的固定div看到。

现在，我想这样做，除了后面的全彩色图像会去饱和（即变成不透明，灰度）顶部div覆盖它。我无法找到任何可以用CSS3完成的方式，也没有可能直接使用JavaScript处理像素。

所以我想我想知道如果canvas元素可以检测标准重叠的DOM元素，并在表面上重绘它们。还是有其他方法可以解决这个问题吗？我不想让整个页面成为一个画布（对于非HTML5浏览器），并且闪光灯不是一个选项。

您的想法非常感谢。

Answer 1

这对我很有意思，所以我实现了一个解决方案。

参见：http://jsfiddle.net/3eHmD/show/（edit）

• 它将工作在 “所有的浏览器”。
• 它使用jQuery。

• 它采用预渲染的图像：

  

• 它没有使用预渲染图像。为了避免预渲染，我使用Pixastic's去饱和（http://www.pixastic.com/lib/docs/actions/desaturate/）。

的JavaScript：（有待改进）

var $fixed = $('.fixed'); 
var $source = $('.content'); 

var $fixedCopy = $('<div class="fixedDimensions"></div>').appendTo('body').css('zIndex', 99); 
var $contentCopy = $source.clone().appendTo($fixedCopy); 


$contentCopy.find(':not(.magic)').css('visibility', 'hidden'); 
$contentCopy.find('.magic').each(function() { 
    $(this).css('backgroundPosition', $(this).width() + 'px 0'); 
}); 

$(window).scroll(function(e) { 
    $contentCopy.css('margin-top',-$(window).scrollTop()); 
}).scroll(); 

CSS：

html, body { 
    margin: 0; 
    padding: 0 
} 
body { 
    background: #eee 
} 

.content { 
    width: 300px; 
    margin: 0 auto 
} 
#fixed { 
    background: url(http://i.stack.imgur.com/GKWv7.png); 
    color: red; 
    font: 36px sans-serif; 
    text-align: center 
} 
.fixedDimensions { 
    height: 200px; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    overflow: hidden; 
    z-index: 100; 
} 

HTML：

<div id="fixed" class="fixedDimensions">Hello</div> 

<div id="container"> 
    <div class="content"> 
     <p><div class="magic" style="width:200px;height:300px;background:url(http://i.stack.imgur.com/b3LRY.jpg)"></div></p> 
     <p>Lorem ipsum dolor...</p> 
     <p><div class="magic" style="width:225px;height:300px;background:url(http://i.stack.imgur.com/6D8gh.jpg)"></div></p> 
     <p>Aenean et diam dui..</p> 
     .. 
    </div> 
</div> 

Answer 2

如果你愿意使用jQuery，你可能想看看jQuery Desaturate plugin。我意识到它不会做你想做的所有事情（它只是使图像饱和或去饱和），但它可以让你在那里获得一些。

Answer 3

其他人提供的解决方案可能会或可能不会更好，您想要做什么。为了完整起见，要回答你的问题：“这是否可能在画布上？”

是的，可以用画布进行去饱和。方法如下：

var imageData = ctx.getImageData(0,0,can.width, can.height); 
var pixels = imageData.data; 
var numPixels = pixels.length; 

ctx.clearRect(0, 0, can.width, can.height); 

for (var i = 0; i < numPixels; i++) { 
    var average = (pixels[i*4] + pixels[i*4+1] + pixels[i*4+2]) /3; 
    // set red green and blue pixels to the average value 
    pixels[i*4] = average; 
    pixels[i*4+1] = average; 
    pixels[i*4+2] = average; 
} 
ctx.putImageData(imageData, 0, 0); 

您将三种现有颜色的颜色取平均值以获得平均颜色亮度。然后，您将所有三种颜色设置为相同的值，以平均亮度变为灰色。合理？

例子：

http://jsfiddle.net/DZmyB/4/