Javascript Html5获取特定的图层图像数据

我正在用html5和jquery创建一个图像滑块，我想做的是在一个画布上相互添加3个图像，然后获取第一个图像的像素数据，删除其中的一些像素，通过我使用的第一个图像显示第二个图像 在Jquery中执行此操作的插件到目前为止，我得到的是

 $(document).ready(function(){
function invert() {
  $("canvas").setPixels({
    x: 150, y: 150,
    width: 100, height: 75,
    // loop through each pixel
    each: function(px) {
      px.r = 255 - px.r;
      px.g = 255 - px.g;
      px.b = 255 - px.b;
      px.a = 255 - px.a;
    }
  });
}

$("canvas")
.addLayer({
    method: "drawImage",
    source: "images/01.jpg",
    x: 100, y: 100,
    width: 480, height: 440
}).addLayer({
    method: "drawImage",
    source: "images/02.jpg",
    x: 100, y: 100,
    width: 380, height: 340
}).addLayer({
    method: "drawImage",
    source: "images/01.jpg",
    x: 100, y: 100,
    width: 280, height: 240,
    load: invert
})
// Draw each layer on the canvas
.drawLayers();

});

---

现在，它所做的是在所有图像中打一个洞，这意味着擦除所有图像中该部分的所有像素，并显示画布的背景。是否可以只获取特定图像或层的像素并反转，是否有可用的jquery插件？还有别的办法吗？这方面的任何帮助都将对我非常有用…Thanx Previous…

canvas元素不提供使用类似层的功能。您可能需要检查附加组件，如或

请记住，在画布上画画就像在纸上画画一样，它不记得以前画了什么，只记得现在画布上有什么，因此如果您绘制一幅图像，然后用另一幅图像绘制，旧图像将永远丢失

您应该做的是将所有三个图像保存在三个不同的缓冲区中（只需将三个不同的图像加载到三个不同的图像对象中）。 然后在上下文中绘制最上面的图像。 如果希望将第一个图像分解为第二个图像，而不是从顶部图像中删除像素（仅显示背景），只需使用与从第一个图像中删除像素相同的坐标，即可从第二个图像中获取像素数据（用于从顶部图像删除像素的坐标可以用作第二个图像的图像数据的索引）并再次使用相同的坐标将这些值复制到画布，例如： 如果算法导致首先删除像素x=100，y=175，则使用这些坐标从第二幅图像的缓冲区获取数据，并将其复制到画布图像数据中的相同坐标

下面是一些代码：

var width  = 300;
var height = 300;

var img1 = new Image();
img1.src = "image1.png";
var img2 = new Image();
img2.src = "image2.png";

function go()
{
    // Wait for the images to load

    if ( !img1.complete || !img2.complete )
    {
        setTimeout( go, 100 );
        return;
    }

    // Create a temporary canvas to draw the other images in the background

    var tc = document.createElement( "canvas" );
    tc.width = width;
    tc.height = height;
    var c2 = tc.getContext( "2d" );

    // Draw the first image in the real canvas (change the ID to your canvas ID)

    var c = document.getElementById( "myCanvas" ).getContext( "2d" );
    c.drawImage( img1, 0, 0 );
    var data1 = c.getImageData( 0, 0, width, height );  // Get the data for the first image

    // Draw the second image in the temporary canvas (which is hidden) and get its data

    c2.drawImage( img2, 0, 0 );
    var data2 = c2.getImageData( 0, 0, width, height );

    // Copy the data from the hidden image to the visible one
    // This is where your magic comes into play, the following
    // is just a very very simple example

    var pix1 = data1.data;
    var pix2 = data2.data;

    for ( var x = 0; x < width; x++ )
    {
        for ( var y = 0; y < height; y++ )
        {
            var pos = ( ( y * width ) + x ) * 4;
            pix1[ pos ] = pix2[ pos++ ];
            pix1[ pos ] = pix2[ pos++ ];
            pix1[ pos ] = pix2[ pos++ ];
            pix1[ pos ] = pix2[ pos ];
        }
    }

    // Redraw the visible canvas with the new data

    c.putImageData( data1, 0, 0 );
}

window.onload = go;

var宽度=300；
var高度=300；
var img1=新图像（）；
img1.src=“image1.png”；
var img2=新图像（）；
img2.src=“image2.png”；
函数go（）
{
//等待图像加载
如果（！img1.complete | |！img2.complete）
{
设置超时（go，100）；
返回；
}
//创建临时画布以在背景中绘制其他图像
var tc=document.createElement（“画布”）；
tc.宽度=宽度；
tc.高度=高度；
var c2=tc.getContext（“2d”）；
//在真实画布中绘制第一个图像（将ID更改为画布ID）
var c=document.getElementById（“myCanvas”）.getContext（“2d”）；
c、 绘图图像（img1,0,0）；
var data1=c.getImageData（0，0，宽度，高度）；//获取第一个图像的数据
//在临时画布（隐藏）中绘制第二个图像并获取其数据
c2.绘图图像（img2，0，0）；
var data2=c2.getImageData（0，0，宽度，高度）；
//将数据从隐藏图像复制到可见图像
//这就是你的魔法发挥作用的地方，如下
//这只是一个非常简单的例子
var pix1=data1.data；
var pix2=data2.data；
对于（变量x=0；x

听起来你想要的是通过图像进行剪辑，但我不知道剪辑是否也适用于pixles（它们通常适用于形状）