Javascript 手动滑块不应在透明区域可见

我碰到了一件对你们中的一些人来说肯定是一个挑战的事情。至少对我来说是这样，我希望有人能帮我解决这个问题

我使用的是两张相互重叠的图片。然后是一个分割图像，你可以用光标控制它从左向右滑动，反之亦然

<div class="green_block"></div>
<div class="triforce">
  <div class="divider"></div>
</div>

这一切都是可行的，但我希望分割线在接触顶部图像的透明区域时不可见

---

在小提琴的情况下，蓝色条必须显示在三原力的顶部，但不能显示在它的透明部分。这可能吗？

我会使用第二个图像，它与您的图像正好相反（透明部分=>蓝色/彩色=>透明）

之后，我会在顶部图像同时移动两个div。 绿色的一秒和一秒将被分隔器（溢出隐藏）（分隔器应该是透明的）

一个（溢出隐藏）必须执行动画，否则分割器将移动，因此它将看起来像您的图像的确切对手

  <div class="green_block"></div>
   <div class="triforce">
    <div class="divider">
      <div class="antagonist-div">
      <!-- this one should move inside the divider while he is moving --> 
      </div>
    </div>
   </div>
  </div>

---

可以使用canvas元素。 使用画布的

getImageData

方法获取图像的像素数据，并检查rgb值。要使用

getImageData

，由于跨域问题，您需要将脚本文件和图像放在同一个域上。在这种情况下，分隔器在#00ff00上不可见

HTML:

Javascript:

$(document).ready(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var image=document.createElement("img");
    image.onload=function(){
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.fillStyle="#00ff00";
        ctx.fillRect(0,0,canvas.width,canvas.width);
        ctx.drawImage(image,0,0);
        init();
    }

    image.src="Triforce.png";

    function init(){
        var imageData = ctx.getImageData(0, 0, image.width, image.height);
        var data = imageData.data;
        canvas.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var x = mousePos.x;
            var y = mousePos.y;

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

            ctx.fillStyle="#00ff00";
            ctx.fillRect(0,0,canvas.width,canvas.width);

            ctx.drawImage(image,0,0);

            ctx.fillRect(x, 0, canvas.width,canvas.height);

            ctx.fillStyle="#0000ff";
            for(var i=x;i<x+10;i++){
                for(var j=0;j<image.height;j++){
                    var red = data[((image.width * j) + i) * 4];
                    var green = data[((image.width * j) + i) * 4 + 1];
                    var blue = data[((image.width * j) + i) * 4 + 2];
                    var alpha = data[((image.width * j) + i) * 4 + 3];
                    if(!(red==0 && green==255 && blue==0)){
                        ctx.fillRect(i,j,1,1);
                    }
                }
            }
        }, false);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
});

$（文档）.ready（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var image=document.createElement（“img”）；
image.onload=function（）{
canvas.width=image.width；
canvas.height=image.height；
ctx.fillStyle=“#00ff00”；
ctx.fillRect（0,0，canvas.width，canvas.width）；
ctx.drawImage（图像，0,0）；
init（）；
}
image.src=“Triforce.png”；
函数init（）{
var imageData=ctx.getImageData（0，0，image.width，image.height）；
var数据=imageData.data；
canvas.addEventListener（'mousemove'，函数（evt）{
var mousePos=getMousePos（canvas，evt）；
var x=mousePos.x；
变量y=鼠标点y；
clearRect（0,0，canvas.width，canvas.height）；
ctx.fillStyle=“#00ff00”；
ctx.fillRect（0,0，canvas.width，canvas.width）；
ctx.drawImage（图像，0,0）；
fillRect（x，0，canvas.width，canvas.height）；
ctx.fillStyle=“#0000ff”；
对于（var i=x；i我找到了一个适合我的解决方案。我创建了另一个图像，其中我将网站的背景作为透明部分。我将此图像放置在其他图像的顶部，并让分隔器在其后面滑动

粗糙的解决方案，不推荐，但在这种情况下就足够了。感谢所有的帮助。我从中学到了很多。
这是可能的，但并不容易。你可以创建一个全蓝色的triforce版本，只显示你想要的部分。如果你想自动化这个过程，你需要画布，以便获得piXEL是透明的。这将是非常困难的，因为浏览器兼容性，除非真的需要，否则我会寻找另一种方法。我担心这将是答案。CSS3碰巧有这个-webkit mask属性，但这只适用于webkit浏览器。当然可以做到，但除非真的需要，请尝试寻找easi呃，这样做需要很长时间，对吗？需要这样做吗？是的。我想在这上面花上几周时间吗？不可能。如果有其他选择的话，我愿意接受。我很想看到这些令人惊讶的东西，但遗憾的是，这在IE8中不起作用。我们仍然需要用IE8为用户服务：(
$(document).ready(function(){
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var image=document.createElement("img");
    image.onload=function(){
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.fillStyle="#00ff00";
        ctx.fillRect(0,0,canvas.width,canvas.width);
        ctx.drawImage(image,0,0);
        init();
    }

    image.src="Triforce.png";

    function init(){
        var imageData = ctx.getImageData(0, 0, image.width, image.height);
        var data = imageData.data;
        canvas.addEventListener('mousemove', function(evt) {
            var mousePos = getMousePos(canvas, evt);
            var x = mousePos.x;
            var y = mousePos.y;

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

            ctx.fillStyle="#00ff00";
            ctx.fillRect(0,0,canvas.width,canvas.width);

            ctx.drawImage(image,0,0);

            ctx.fillRect(x, 0, canvas.width,canvas.height);

            ctx.fillStyle="#0000ff";
            for(var i=x;i<x+10;i++){
                for(var j=0;j<image.height;j++){
                    var red = data[((image.width * j) + i) * 4];
                    var green = data[((image.width * j) + i) * 4 + 1];
                    var blue = data[((image.width * j) + i) * 4 + 2];
                    var alpha = data[((image.width * j) + i) * 4 + 3];
                    if(!(red==0 && green==255 && blue==0)){
                        ctx.fillRect(i,j,1,1);
                    }
                }
            }
        }, false);
    }

    function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
            x: evt.clientX - rect.left,
            y: evt.clientY - rect.top
        };
    }
});