在鼠标光标下更改图像部分的颜色

Question

我有一个灰度图像，我想将图像的某些区域更改为鼠标光标下的颜色。

它类似于黑暗中的手电筒（http://www.mantlelabs.com/flashlight/），但我想将部分黑/白图像更改为彩色图像。

我唯一的想法是将彩色图像放在灰度级上方，并使用一些画布改变光标下区域中彩色图像的不透明度......

Answer 1

_{画布非常有趣，}
但如果你需要一些非常简单的东西：

$('.model').mousemove(function(e){
  
  var offs = $(this).offset(),
      p    = {x:offs.left, y:offs.top},
      mPos = {x:e.pageX, y:e.pageY},
      x    = mPos.x - p.x - 50,
      y    = mPos.y - p.y - 50;
      
  $('.gray', this).css({left:x, top:y, backgroundPosition: -x+'px '+-y+'px'});
    
});

.model{
  position:relative;
  margin:0 auto;
  background: url('http://i.imgur.com/Tv0O1te.jpg');
  width:236px;
  height:322px;
  overflow:hidden;
}
.gray{
  position:absolute;
  top:0;
  left:0;
  width:100px;
  height:100px;
  background: url('http://i.imgur.com/ozg5hsQ.jpg');
  border-radius:50%;
}

<p style="height:1000px;"></p>

<div class="model">
  <div class="gray"></div>
</div>
  
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

这是另一个有趣的例子

$('.model').on('mousemove', function(e){
  
  var x = e.pageX - $(this).offset().left;
  $('.gray', this).css({width: x});
    
});

.model{
  position:relative;
  margin:0 auto;
  background: url('http://i.imgur.com/ozg5hsQ.jpg');
  width:236px;
  height:322px;
  overflow:hidden;
}
.gray{
  position:absolute;
  top:0;
  left:0;
  width:0;
  height:100%;
  background: url('http://i.imgur.com/Tv0O1te.jpg');
  border-right:1px solid #fff;
}

<div class="model">
  <div class="gray"></div>
</div>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Answer 2

我会使用地图，不幸的是你必须将你的图像切成几个png ...或者你可以使用掩模剪辑。 http://www.html5rocks.com/en/tutorials/masking/adobe/

Answer 3

有两种方法可以做到这一点：

首先，使用canvas.getImageData（）。数据操作数据（返回一个像素数组，然后你必须操纵范围内的像素并最终使用putImageData）但是它会非常慢，当然！

其他方式是将图像设置为灰度，并且像您所说的彩色图像，诀窍是使用全局复合操作 http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

步骤：

• 制作缓冲区，将彩色图像全部绘制在内部，将第二个缓冲区清空。
• 你有你的画布和2个缓冲区。
• 直接在画布上绘制灰度图像
• 在buffer2中绘制buffer1
• 将复合操作设置为destination-atop
• 在给定位置（鼠标）绘制形状，圆圈？或者保存在其他缓冲区中的形状
• 将复合操作设置为source-over

这将成为诀窍。 如果你想要更复杂的效果，只需要在缓冲区上进行图层效果并尝试一些coposite操作：）

PS：当然我们可以用DOM做简单的事情，取决于你想要的FX

Answer 4

您可以默认显示灰度图像，并在jquery中使用.mouseover（）事件来隐藏灰度图像并显示彩色图像。 如果你使用javascript或jquery，它很简单。如下所示

$( "#greyScaleImg" ).mouseover(function() {
$( "#ColorImg" ).css("display","");;
});

$( "#ColorImg" ).mouseout(function() {
$( "#greyScaleImg" ).css("display","");;
});