Получить rgb каждого пикселя

@kurlyak · Регистрация: 26.09.2007

Студворк — интернет-сервис помощи студентам

Добрый день. Например есть код:

JavaScript
1
2
var img = new Image();
img.src = 'texture256.jpg';

Мне надо получить значения rgb каждого пикселя из этого изображения. Есть какие то функции для этого? Я например владею знаниями как из канвы canvas получать доступ к пикселям этой канвы. Фактически мне надо без рисования этого изображения на канве получить доступ к пикселям изображения. Я хочу сложить такой алгоритм- получить значения rgb каждого пикселя изображения, и попиксельно вывести на канву. То есть мне надо что бы под рукой был массив пикселей rgb этого изображения. Заранее спасибо.

@tomater · 17.03.2021, 21:34

Я не знаю другого способа, кроме как нарисовать в канву. Но для этого не обязательно канву рисовать на экран, можно создать виртуальную канву:

JavaScript
1
2
3
4
        
let cnv = document.createElement('canvas');
cnv.width = w;
cnv.height = h;

Ну и после этого отрисовать в него картинку и наслаждаться доступом к пикселям

@kurlyak · 18.03.2021, 05:48 **[ТС]**

Спасибо! У меня идея- можно создать две канвы! На одну рисовать изображение и получить доступ к пикселям, а на другой это изображение выводить- т.е. рисовать. Можно так реализовать?

@kurlyak · 18.03.2021, 06:39 **[ТС]**

Я вот такой код сделал, рисует изображение на канву 2, потом с канвы 2 копирует пиксели на канва 1. Но не работает код.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<body>
 
<canvas id="canvas" width="256" height="256" style="border: 1px solid black;"></canvas>
 
<canvas id="canvas2" width="256" height="256" style="border: 1px solid black;"></canvas>
 
 
<script>
 
 
var img = new Image();
img.src = 'texture256.jpg';
var canvas2 = document.getElementById('canvas2');
canvas2.style.left = 256;
canvas2.style.top = 0;
canvas2.style.position = "absolute";
var ctx2 = canvas2.getContext('2d');
img.onload = function() {
  ctx2.drawImage(img, 0, 0, 256, 256);
  //img.style.display = 'none';
}
 
var canvasWidth2 = canvas2.width;
  var canvasHeight2 = canvas2.height;
  ctx2.clearRect(0, 0, canvasWidth2, canvasHeight2);
  var id2 = ctx2.getImageData(0, 0, canvasWidth2, canvasHeight2);
  var pixels2 = id2.data;
 
ctx2.putImageData(id2, 0, 0);  
 
 
 
var canvas = document.getElementById('canvas');
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.position = "absolute";
 
var ctx = canvas.getContext('2d');
 
var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  var pixels = id.data;
 
   
for ( y = 0; y < 256; y++ )
{
    for ( x = 0; x < 256; x++ )
    {
        var off = (y * id.width + x) * 4;
        
        pixels[off] = pixels2[off];
        pixels[off + 1] = pixels2[off + 1];
        pixels[off + 2] = pixels2[off + 2];
        pixels[off + 3] = pixels2[off + 3];
 
    }
}
 
ctx.putImageData(id, 0, 0);
 
</script>
 
</body>

@j2FunOnly · 18.03.2021, 08:52

Сообщение от kurlyak

рисует изображение на канву 2, потом с канвы 2 копирует пиксели на канва 1

Не проверял ваш код, но

Сообщение от kurlyak

JavaScript
18
19
20
21
img.onload = function() {
  ctx2.drawImage(img, 0, 0, 256, 256);
  //img.style.display = 'none';
}

Ваш код сначала сделает всё что вы написали и только потом отрисует изображение на канве.

@kurlyak · 18.03.2021, 09:15 **[ТС]**

Спасибо, я понял, я сделал вот такой код, закоментировал onload() не хочет работать, как выйти из ситуации?

JavaScript
1
2
3
4
//img.onload = function() {
  ctx2.drawImage(img, 0, 0, 256, 256);
  //img.style.display = 'none';
}

@j2FunOnly · 18.03.2021, 09:21

Сообщение от kurlyak

закоментировал onload()

вам надо наоборот весь ваш код по копированию пикселей запускать по событию загрузки изображения
Плюс есть подводные камни Не отрабатывает .on('load')

@kurlyak · 18.03.2021, 10:38 **[ТС]**

Сделал по вашему совету, изображение на канву грузиться и видно на экране (т.е. onload срабатывает), но вторая канва пустая. и такое впечатление изображение на канву грузиться но нету доступа до пикселей канвы и изображение немного поднятое, хотя обе канвы на одной высоте должны быть.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<script>
 
var img = new Image();
img.src = 'texture256.jpg';
var canvas2 = document.getElementById('canvas2');
canvas2.style.left = 256;
canvas2.style.top = 0;
canvas2.style.position = "absolute";
var ctx2 = canvas2.getContext('2d');
img.onload = function() {
  ctx2.drawImage(img, 0, 0, 255, 255);
  //img.style.display = 'none';
 
  var canvasWidth2 = canvas2.width;
  var canvasHeight2 = canvas2.height;
  //ctx2.clearRect(0, 0, canvasWidth2, canvasHeight2);
  var id2 = ctx2.getImageData(0, 0, canvasWidth2, canvasHeight2);
  //var pixels2 = id2.data;
  var pixels2 = id2.data;
  ctx2.putImageData(id2, 0, 0);  
 
 
var canvas = document.getElementById('canvas');
canvas.style.left = 0;
canvas.style.top = 0;
canvas.style.position = "absolute";
 
var ctx = canvas.getContext('2d');
 
var canvasWidth = canvas.width;
  var canvasHeight = canvas.height;
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  var id = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
  var pixels = id.data;
   
for ( y = 0; y < 256; y++ )
{
  for ( x = 0; x < 256; x++ )
  {
    var off = (y * id.width + x) * 4;
      
      pixels[off] = pixels2[off];
      pixels[off + 1] = pixels2[off + 1];
      pixels[off + 2] = pixels2[off + 2];
      pixels[off + 3] = pixels2[off + 3];
 
  }
}
 
ctx.putImageData(id, 0, 0);
 
}
 
</script>

@j2FunOnly · 18.03.2021, 10:54

Не менял ваш код - всё работает. Зрите в консоль браузера:

Code
1
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

по протоколу file:// вы не получите данные изображения, так же как и если изображение из стороннего источника

@kurlyak · 18.03.2021, 11:38 **[ТС]**

Я запустил сервер все заработало. Перед этим просто запускал из папки html файл. Наверно в этом была причина?

@tomater · 18.03.2021, 12:47

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@kurlyak 14 / 14 / 8 Регистрация: 26.09.2007 Сообщений: 919
	18.03.2021, 05:48 [ТС]
	Спасибо! У меня идея- можно создать две канвы! На одну рисовать изображение и получить доступ к пикселям, а на другой это изображение выводить- т.е. рисовать. Можно так реализовать? 0

@kurlyak 14 / 14 / 8 Регистрация: 26.09.2007 Сообщений: 919
	18.03.2021, 11:38 [ТС]
	Я запустил сервер все заработало. Перед этим просто запускал из папки html файл. Наверно в этом была причина? 0

@tomater 118 / 51 / 1 Регистрация: 17.03.2021 Сообщений: 178
	18.03.2021, 12:47
	Скорее всего да. Сам только что так же мучился с загрузкой звуков из кода - никак не хотело работать локально, но с сервака без проблем. 1

Получить rgb каждого пикселя

Решение