HTML5 Получить данные изображения конкретного слоя - PullRequest
Новая
       24

HTML5 Получить данные изображения конкретного слоя

0 голосов
/ 08 января 2012

Я создаю слайдер изображений с помощью html5 и jquery. Я хочу добавить 3 изображения друг на друге на одном холсте, затем получить пиксельные данные первого изображения и удалить некоторые из его пикселей, чтобы показывать 2-е изображение через первое окно.Я использую 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?любой другой способ сделать это?Любая помощь по этому вопросу будет очень полезна для меня .... Заранее спасибо ....

Ответы [ 2 ]

1 голос
/ 08 января 2012

Имейте в виду, что рисование на холсте похоже на рисование на бумаге, оно не запоминает то, что вы нарисовали раньше, только то, что у вас есть на холсте прямо сейчас, поэтому, если вы рисуете одно изображение, а затем рисуете поверх другого,старое изображение теряется навсегда.

Что вам нужно сделать, это сохранить все три изображения в трех разных буферах (просто загрузите три разных изображения в три разных объекта изображения).Затем нарисуйте самое верхнее изображение в контексте.Если вы хотите растворить первое изображение во втором, вместо удаления пикселей с верхнего изображения (которое будет отображать только фон), просто используйте те же координаты, которые вы использовали бы для удаления пикселей из первого изображения, чтобы получить данные о пикселях.из второго изображения (координаты для удаления пикселя из верхнего изображения можно использовать в качестве индексов для данных изображения для второго изображения) и скопируйте эти значения на холст, снова используя те же координаты, например: если ваш алгоритм приводит васчтобы сначала удалить пиксель 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;
0 голосов
/ 08 января 2012

Элемент canvas не позволяет использовать такие слои. Возможно, вам понадобится проверить надстройки, такие как холст, коллаж или CanvasStack

...