холст, как фреймбуфер, работает на Chrome, но не в Firefox

Question

Я пытаюсь использовать холст, такой как framebuffer, в chrome работает нормально, но в firefox нет.Любой специалист по Firefox может увидеть код?

в https://github.com/r3www/r3/blob/master/compiler.js строках 445 ..

function r3init() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d',{alpha:false,preserveDrawingBuffer:true});
    imageData=ctx.getImageData(0,0,canvas.width, canvas.height);
    buf8=new Uint8ClampedArray(memdata,0,imageData.data.length);

    meminidata=imageData.data.length;// dinamic???
    }

function redraw() { 
    imageData.data.set(buf8);ctx.putImageData(imageData,0,0); 
    }

r3init устанавливает холст и перерисовывает копию памяти кадрового буфера на холст.

для попытки перейдите к https://rawgit.com/r3www/r3/master/index.html

и нажмите кнопку «Выполнить».

Спасибо

Answer 1

Ваша проблема в том, что вы полагаетесь на ошибку Chrome , которая не соответствует вашему alpha: false CanvasRenderingContext2DSetting, когда вы помещаете прозрачные данные ImageData.

Когда вы делаете ctx.putImageData(ImageData, x, y) для такого контекста, альфа-канал должен игнорироваться алгоритмом и всегда полностью непрозрачен => 255.

Из примечания спецификации :

Таким образом, растровое изображение такого контекста начинается с непрозрачного черного вместо прозрачного черного;clearRect () всегда приводит к непрозрачным черным пикселям, каждый четвертый байт из getImageData () всегда равен 255, метод putImageData () эффективно игнорирует каждый четвертый байт в его входных данных и т. д.

Итак,Я не копал точно, что вы делаете с этими данными, но кажется, что вы предполагаете, что альфа-канал изначально равен 0, хотя на самом деле это не должно быть.

Простое решение - инициализировать ваш контекст с помощьюальфа-набор по умолчанию.
_{Также обратите внимание, что preserveDrawingBuffer является параметром webgl, в 2D-контексте отсутствует буфер рисования.}

// alpha for everyone
ctx = canvas.getContext('2d');

---

Простой тест для текущего сломанного Chrome(по крайней мере v69.0.3497)

const alpha = document.createElement('canvas')
  .getContext('2d');
const opaque = document.createElement('canvas')
  .getContext('2d', {
    alpha: false
  });
// a transparent ImageData
const transp = alpha.createImageData(300, 150);
// alpha channel should be ignored
opaque.putImageData(transp,0,0);

const opaque_c = opaque
  .getImageData(0,0,4,4)
  .data[3];
const alpha_c = alpha
  .getImageData(0,0,4,4)
  .data[3]

console.log('opaque', opaque_c); // should be 255
console.log('alpha', alpha_c); // should be 0