JavaScript: сохранить значение цвета каждого пикселя изображения

Question

Что я хочу сделать: загрузить изображение и считать его попиксельно, чтобы сохранить значение каждого пикселя.

Что я делаю:

let canvas = document.createElement("canvas");
let image = document.createElement("img");
image.setAttribute("src", imagePath);

canvas.width = image.width;
canvas.height = image.height;

let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);

~ Попиксельное считывание изображения с использованием функции getImageData ~

Но есть проблема: размеры изображения равны 0.

Answer 1

Думаю стоит дождаться когда картинка загрузится

let imagePath = "https://via.placeholder.com/150";

let canvas = document.createElement("canvas");
let image = document.createElement("img");

image.onload = function () {
  canvas.width = image.width;
  canvas.height = image.height;

  let context = canvas.getContext("2d");
  context.drawImage(image, 0, 0, image.width, image.height);

  document.body.appendChild(canvas);
};
image.setAttribute("src", imagePath);

БЛОГ НА HUSL

JavaScript: сохранить значение цвета каждого пикселя изображения

Ответы (1 шт):