Рендеринг 1 пикселя из трехмерного массива на холсте HTML5 с использованием putImageData () и UInt8ClampedArray - PullRequest
Новая
       52

Рендеринг 1 пикселя из трехмерного массива на холсте HTML5 с использованием putImageData () и UInt8ClampedArray

0 голосов
/ 31 января 2019

Я старался изо всех сил визуализировать только 1 пиксель из 3D-массива в HTML5-холсте безуспешно.

(я знаю, что это было сделано раньше, но не с 3D-массивом).Но преобразование трехмерного массива в массив Uint8ClampedArray и его перетаскивание в массив Uint8ClampedArray нелегко.

HTML5 также не имеет другого способа отображения изображения с возможностью манипулирования пикселями.

Правильно ли, что putImageData() для рендеринга вертикальных строк пикселей?

Вот мой код, проблема помечена: «ЧТО Я ДОЛЖЕН ЗДЕСЬ СДЕЛАТЬ»: 

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="UTF-8">
    <title>
      Index.html
    </title>
  </head>
  <body style="margin: 0px; padding: 0px;">
    <canvas id="canvas">
    </canvas>
    <script>
      let a = new Array();
      a.push([]);
      a[x.length - 1].push([]);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(0);
      a[x.length - 1][a[a.length - 1].length - 1].push(255);
      document.getElementById("canvas").getContext("2d").putImageData(new 
      ImageData(new Uint8ClampedArray("WHAT DO I GOTTA DO HERE"), 1, 1), 1, 
      1);
    </script>
  </body>    
</html>

Чтобы проверить это, вы можетеиспользовать: 

console.log(a);
console.log(a[0]);
console.log(a[0][0]);
console.log(a[0][0][0]);

Ответы [ 3 ]

0 голосов
/ 31 января 2019

Нарисуйте 200 х 200 красных блоков на холсте.Требуется <canvas></canvas>

Я бы не советовал использовать 3D-массив, так как он кажется излишне сложным 

const width = 200;
const height = 200;

const canvas = document.getElementsByTagName('canvas')[0];
const context = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
const destData = new ImageData(width, height);
const dData = destData.data;

for (let y = 0; y < height; y++) {
  for (let x = 0; x < width; x++) {
    const o = 4 * (y * width + x);
    dData[o] = 255; // R
    dData[o + 1] = 0; // G
    dData[o + 2] = 0; // B
    dData[o + 3] = 255; // A
  }
}

context.putImageData(destData, 0, 0);
0 голосов
/ 13 апреля 2019

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

Как и выше, это упрощеннохотя версия: 

<!DOCTYPE html>
<html lang="en" + dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>
      Google Chrome, I suppose
    </title>
  </head>
  <body style="background-color: black; margin: 0px; margin-bottom: 0px; padding: 0px;">
    <canvas style="image-rendering: pixelated" id="canvas">
    </canvas>
    <script>
      var t =
      [
        240,
        128
      ];
      document.getElementById('canvas').width = t[0];
      document.getElementById('canvas').height = t[1];
      var a = new Array()
      {
        a.push([]);
        a[a.length - 1].push([]);
        a[a.length - 1][a[a.length - 1].length - 1].push(127, 127, 127, 255);
      }
      var i = 0;
      document.getElementById('canvas').getContext('2d').putImageData(new ImageData(Uint8ClampedArray.from
      (
        [].concat.apply
        ([],
          a[i]
        )
      ), 1), i, 0);
      i = i + 1;
      i = 0;
    </script>
  </body>
</html>

, как вы можете видеть, я заменил переменную x на.

Я надеюсь, что это может помочь другим, и спасибо всем за ваше предложение!

0 голосов
/ 31 января 2019

Вы создали обычный массив Javascript - вам просто нужно преобразовать его в фиксированный массив.Сверху головы, что-то вроде: 

document.getElementById("canvas").getContext("2d").putImageData(new 
  ImageData(Uint8ClampedArray.from(x), 1, 1), 1, 1);

(или вместо этого запишите свои данные в новый массив Uint8ClampedArray)

...