Context.getImageData не работает в паре с выводом картинки

@Atarion · Регистрация: 01.04.2016

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

хочу получить данные попиксельно

JavaScript
1
 var imageData = context.getImageData(0, 0, 100, 60) ;

удивительно, но если на context перед этим вывести что угодно методом

JavaScript
1
context.drawImage(image,0, 0, image.width, image.height,0, 0, image.width,image.height);

то функция попросту перестает работать
может кто подскажет в чем тут может быть дело?

@DrType · 03.01.2022, 22:36

Попросту перестаёт или выбрасывает ошибку operation is insecure?

@Eva Rosalene · 03.01.2022, 22:38

Atarion,

Because the pixels in a canvas's bitmap can come from a variety of sources, including images or videos retrieved from other hosts, it's inevitable that security problems may arise.

As soon as you draw into a canvas any data that was loaded from another origin without CORS approval, the canvas becomes tainted. A tainted canvas is one which is no longer considered secure, and any attempts to retrieve image data back from the canvas will cause an exception to be thrown.

If the source of the foreign content is an HTML <img> or SVG <svg> element, attempting to retrieve the contents of the canvas isn't allowed.

If the foreign content comes from an image obtained from either as HTMLCanvasElement or ImageBitMap, and the image source doesn't meet the same origin rules, attempts to read the canvas's contents are blocked.

Calling any of the following on a tainted canvas will result in an error:

Calling getImageData() on the canvas's context
Calling toBlob() on the <canvas> element itself
Calling toDataURL() on the canvas
Attempting any of these when the canvas is tainted will cause a SecurityError to be thrown. This protects users from having private data exposed by using images to pull information from remote web sites without permission.

from https://developer.mozilla.org/... d_canvases

Не в этом проблема?

@Atarion · 03.01.2022, 22:55 **[ТС]**

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

@Eva Rosalene · 03.01.2022, 23:00

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

мне нужно нарисовать картинку на холсте и получить попиксельный доступ.

нужно чтобы картинка проходила сквозь SOP

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

у меня выдает - ошибка скрипта.

точная формулировка какая? что в консоли?

@Atarion · 03.01.2022, 23:17 **[ТС]**

JavaScript
1
2
3
4
5
      window.onerror = function (msg, url, line) {
               alert("Message : " + msg );
               alert("url : " + url );
               alert("Line number : " + line );
            }

вот это так и выдает - ошибка скрипта. все.
что такое sop как пройти?

Добавлено через 5 минут
а насчет консоли:
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at HTMLDocument.<anonymous>

Добавлено через 5 минут
да, спасибо. отлично помогла консоль. нужно было попросту на сервер поместить. а не из папки запускать. безопасность.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	03.01.2022, 22:36
	Попросту перестаёт или выбрасывает ошибку `operation is insecure`? 0

@Atarion 8 / 8 / 1 Регистрация: 01.04.2016 Сообщений: 622
	03.01.2022, 22:55 [ТС]
	у меня выдает - ошибка скрипта. про безопасность ни слова. впрочем ладно, а как быть то? мне нужно нарисовать картинку на холсте и получить попиксельный доступ. 0

Context.getImageData не работает в паре с выводом картинки

Решение