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

【问题标题】：Change color of part of image under mouse cursor更改鼠标光标下部分图像的颜色
【发布时间】：2019-05-06 22:29:08
【问题描述】：

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

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

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

【问题讨论】：

欢迎来到 SO。该站点用于回答有关您的代码问题的具体技术问题。它不是代码编写服务。请提供您现有的代码和一个具体问题，解释它为什么不起作用
使用画布是一种很好的方式。仅使用 css 的方法是使用过滤器（浏览器支持不佳）。我认为最好的办法是在服务器上创建一个黑白版本的图像并将两者都发送到浏览器。在那里你可以使用一个简单的 js 脚本来隐藏/显示一些部分
@freefaller 感谢您的评论。我试图自己找到一些解决方案，但我无法得到一些聪明的想法，我认为会有一些简单的解决方案。我只是需要一个方向如何去做......但下次我会尝试自己写点东西......

标签： javascript jquery html css image

【解决方案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>

【讨论】：

这几乎是完美的！非常感谢。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以默认显示灰度图像，并利用 jquery 中的 .mouseover() 事件隐藏灰度图像并显示彩色图像。如果您使用 javascript 或 jquery，它非常简单。如下所示

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

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

【讨论】：

【解决方案4】：

有两种方法可以做到：

首先，使用 canvas.getImageData().data 操作数据（返回一个像素数组，然后您必须操作该范围内的像素，最后使用 putImageData）但它会非常慢，当然！

另一种方法是像你说的那样有灰度图像和彩色图像，诀窍是使用 global-composite-operation http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp

步骤：

创建一个缓冲区，其中包含完全绘制的彩色图像，使第二个缓冲区为空。
您有画布和 2 个缓冲区。
直接在画布上绘制灰度图像
在缓冲区 2 中绘制缓冲区 1
将复合操作设置为destination-atop
在给定位置（鼠标）绘制形状，圆？或保存在其他缓冲区中的形状
将复合操作设置为 source-over

这会成功的。如果您想要更复杂的效果，只需在缓冲区上制作图层效果并尝试一些复合操作:)

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

【讨论】：