Блог

Главная - Вопросы по программированию - putImageData выдает черный экран

putImageData выдает черный экран

#javascript #canvas #2d #putimagedata

#javascript #холст #2d #putimagedata

Вопрос:

У меня есть массив пиксельных данных, которые передаются из программы webgl. Затем я обрабатываю пиксельные данные для экранирования зеленым цветом и вывожу результат в 2d-холст. Учитывая, что я новичок в 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. Если холст пуст, то любые изображения, сделанные из него, будут черными…

2. Я впервые использую 2d-контекст canvas, так что же именно означает, что canvas пуст? И как мне это изменить?

Ответ №1:

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

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

Если data является объектом, подобным массиву, и содержит 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 на пиксели и с длиной внутренней ширины x внутренней высоты x 4).

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