PutImageData дает черный экран - PullRequest
Новая
       40

PutImageData дает черный экран

1 голос
/ 28 марта 2019

У меня есть массив данных пикселей, которые передаются из программы webgl. Затем я обрабатываю пиксельные данные для зеленого скрининга и вывожу результат на двухмерный холст. Учитывая, что я новичок в Canvas 2d, у меня возникает вопрос, как правильно передать данные изображения на холст. 

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var SetCanvas = function(data){
    var id = ctx.createImageData(window.innerWidth, window.innerHeight);
    id.data = data;
    ctx.putImageData(data, 0, 0);
};

1 Ответ

0 голосов
/ 28 марта 2019

data свойство объекта ImageData не может быть установлено таким образом.

Вам необходимо установить для каждого значения этого Uint8ClampedArray значения входящего data.

Если data является объектом ArrayLike и содержит значения Uint8Clamped, тогда вы можете использовать set() метод TypedArrays. 

var SetCanvas = function(data){
  var id = ctx.createImageData(window.innerWidth, window.innerHeight);
  id.data.set( data );
  ctx.putImageData(id, 0, 0);
};

Но, конечно, это предполагает, что data содержит правильные данные (то есть 4 значения RGBA Uint8 на пиксели и с длиной innerWidth x innerHeight x 4 ).

Кроме того, вы вводили свой ввод data вместо ImageData id.

...