putImageData не показывает изображение

Question

Я использую следующую функцию для обновления содержимого элемента canvas, где frame_data - это массив width*height*3.

function updateCanvas(frame_data, width, height) {
    img = ctx.createImageData(width, height);

    for (i=0, j=0; j < frame_data.length; i++) {
        if ((i > 0) && (i%3==0)) {
            img.data[i] = 255;
        } else {
            img.data[i] = frame_data[j++];
        }
    }
    ctx.putImageData(img, 0, 0);
}`

Это не работает в Chrome 8, так как яв результате получаем это изображение:

Я проверил массив img.data, созданный этой функцией, и данные верны.Поэтому я предполагаю, что проблема в функции putImageData.Кто-нибудь еще сталкивался с такой же проблемой?Что может быть не так?

Answer 1

Массив холстых изображений содержит не 3 записи на пиксель [r, g, b], а 4 [r, g, b, a], поэтому, если предполагается, что% 3 устанавливает альфа-значение, оно должно действительно быть% 4.

В данный момент существует исключение для первой записи (0), затем для 4-й записи (i = 3) устанавливается значение 255 (правильное значение), а затем для 7-й записи (i = 6) устанавливается значение 255, это означает, что вместо [r, g, b, a, r, g, b, a] у вас есть [r, g, b, a, r, g, a, b], и со временем оно ухудшается.

Попробуйте

function updateCanvas(frame_data, width, height) {

    img = ctx.createImageData(width, height);

    for (i=0;j=0; j < frame_data.length; j=j+3) {
            img.data[i] = frame_data[j];
            img.data[i+1] = frame_data[j+1];
            img.data[i+2] = frame_data[j+2];
            img.data[i+3] = 255;
            i+=4;
    }
    ctx.putImageData(img, 0, 0);
}`