0

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

Что я делаю:

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.

1 ответ 1

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);

2
  • Спасибо, это работает. Но есть одна сложность: этот код выполняется в конструкторе класса и конечный список всех пикселей (pixels) мне нужно присвоить полю класса this.pixels. Как это можно сделать?
    – DeWo Prg
    Commented 7 окт. 2020 в 15:21
  • Стоит задуматься действительно ли вам нужно пихать это в конструктор. Можно сделать статичный метод для создания экземпляра объекта. На ruSO и на SO есть обсуждения этого
    – Ein
    Commented 7 окт. 2020 в 16:22

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.