Html5获取特定图层图像数据

Question

我正在创建一个图像滑块与html5和jquery我想要做的是在一个画布上添加3个图像在彼此的顶部，然后获取第一个图像pixeldata，并删除它的一些像素通过第一我使用jCanvas 插件为此在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插件可用？任何其他方式来做到这一点？任何关于此的帮助对我来说都非常有用....提前感谢....

Answer 1

请记住，在画布上绘图就像在纸上绘画一样，它不会记住您之前绘制的画布上的内容，所以如果你画一幅图像，然后用另一幅图画出来，旧图像永远丢失。

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

Answer 2

canvas元素不提供使用类似图层的功能。您可能需要检查插件，如canvas collage或CanvasStack