Canvas getimagedata не работает

Как исправить ошибку getImageData() Холст был испорчен данными перекрестного происхождения?

Мой код работает очень хорошо на моем localhost, но он не работает на сайте.

Я получил эту ошибку с консоли, для этой строки .getImageData(x,y,1,1).data :

часть моего кода:

Примечание: мой url изображения (src) – из URL поддомена

Как уже говорили другие, вы “портите” холст, загружая его из домена перекрестного происхождения.

Однако вы можете предотвратить это, просто установив:

Это работает, только если удаленный сервер устанавливает следующий заголовок соответствующим образом:

Отличным примером этого является средство выбора файлов Dropbox при использовании опции “прямая ссылка”. Я использую его на oddprints.com для перемещения изображений из URL- адреса удаленного изображения в Dropbox на свой холст, а затем отправляю данные изображений обратно на мой сервер. Все в JavaScript

Я обнаружил, что мне пришлось использовать .setAttribute(‘crossOrigin’, ») и мне пришлось добавить временную метку в строку запроса URL-адреса, чтобы избежать ответа 304 без заголовка Access-Control-Allow-Origin .

Вы не сможете рисовать изображения с другого сервера на холст, а затем использовать getImageData . Это проблема безопасности, и полотно будет считаться “испорченным”.

Будет ли работать для вас, чтобы сохранить копию изображения на ваш сервер с помощью PHP, а затем просто загрузить новое изображение? Например, вы можете отправить URL-адрес на PHP script и сохранить его на свой сервер, а затем вернуть новое имя файла в свой javascript следующим образом:

Вы используете PHP script с некоторым javascript ajax следующим образом:

Если после этого вы используете getImageData на холсте, он будет работать нормально.

В качестве альтернативы, если вы не хотите сохранять изображение целиком, вы можете передать координаты x и y на ваш PHP script и вычислить значение пикселя rgba на этой стороне. Я думаю, что есть хорошие библиотеки для выполнения такой обработки изображений в PHP.

Если вы хотите использовать этот подход, дайте мне знать, если вам нужна помощь в его реализации.

Ваша проблема заключается в том, что вы загружаете внешнее изображение, то есть из другого домена. Это приводит к ошибке безопасности при попытке доступа к любым данным вашего контекста canvas.

Вы “испортили” холст, загрузив его из перекрестного источника. Ознакомьтесь с этой статьей MDN:

Я видел эту ошибку в Chrome когда тестировал свой код локально. Я перешел на Firefox и больше не вижу ошибки. Возможно, переключение на другой браузер – это быстрое решение.

Если вы используете решение, указанное в первом ответе, обязательно добавьте img.crossOrigin = «Anonymous»; сразу после объявления переменной img (например, var img = new Image(); ).

Как матовый ожог говорит в его ответ, вам может потребоваться включить CORS на сервере, где размещены изображения проблем.

Если сервер Apache, это можно сделать, добавив следующий фрагмент (из здесь) либо в конфигурацию VirtualHost, либо в .htaccess файл:

… если добавить его в VirtualHost, вам, вероятно, потребуется перезагрузить конфигурацию Apache (например. sudo service apache2 reload , если Apache работает на сервере Linux)

При работе на локальном сервере добавь сервер

У меня была похожая проблема при работе на местном. Ваш URL будет путь к локальному файлу, например file:///Users/PeterP/Desktop/folder/index.html.

Обратите внимание, что я нахожусь на MAC.

Я обошел это, установив http-сервер по всему миру. https://www.npmjs.com/package/http-server

1. Глобальная установка: npm install http-server -g
2. Запустить сервер: http-server

PS: я предполагаю, что у вас установлен узел, в противном случае вы не будете слишком далеко запускать команды npm.

Сегодня я сталкиваюсь с той же проблемой и решаю ее с помощью кода.

как указано выше, и нет проблемы между доменами.

Источник

Canvas getImageData не работает при запуске локально в Windows? (исключение безопасности)

Я пишу локальное приложение HTML5 для обработки некоторых научных изображений. Я нахожусь в OS X, и я специально пишу его в JavaScript/HTML5 для переносимости, чтобы продемонстрировать его моему супервизору на машине Windows. Это приложение никогда не будет развернуто на сервере.

Проблема в том, что она отлично работает на Safari в OS X, но в Windows она вызывает ошибку безопасности как в Firefox, так и в Chrome. Я думаю, это связано с тем, что он думает, что изображение находится в другом домене, но на самом деле оно находится в той же папке, что и script.

Есть ли способ обойти это?

Ошибка, о которой идет речь, такая же, как здесь:

Изменить: я должен уточнить, ответ на вопрос, который я связал (его запуск на локальном сервере), невозможен, потому что я не могу пойти и установить на этих машинах любое программное обеспечение (или серверы!). Причина, по которой я надеюсь на альтернативный ответ, заключается в том, что она работает на OS X.

Чтобы обойти кросс-происхождение в Chrome, вы можете запустить Chrome с помощью этого флага:

Если вы можете запустить приложение через сервер на своем компьютере, тогда (при условии, что ваш компьютер супервизора находится в той же сети), вы должны иметь возможность открывать сайт на своем компьютере, просто разместив свой IP-адрес в адресной строке его браузер. (Вы можете найти свой IP-адрес в панели предпочтений сети)

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

Попробуйте найти способ запуска вашего сайта в серверной среде.

Изменить: я понял, что ваш вопрос можно интерпретировать как говорящий, что вы даже не можете установить сервер на свой компьютер OS X. Если это то, что вы имели в виду, во-первых, это почти наверняка неверно — вы можете устанавливать и запускать программы в своем пользовательском пространстве, хотя вы не сможете запускать сервер на любых портах 1024 или ниже. Но во-вторых, вы все еще хотите нажать на способ запуска сайта в серверной среде, даже если это означает поиск дополнительных ресурсов.

Источник

HTML5 Canvas putImageData не работает должным образом

Я использую html5 canvas для некоторых манипуляций с изображениями. Я хочу ввести функциональность, чтобы изменить цвет фона холста. Поэтому я позволяю пользователю выбрать пиксель, откуда начать менять цвет фона и предоставить мне новый цвет. Затем я итеративно перемещаюсь по окружающим пикселям для изменения цвета. Однако кажется, что context.putImageData не меняет цвет. Код выглядит примерно так:

Поэтому проблема заключается в том, что функция SetColor не устанавливает новый цвет фона

Вы должны поставитьImageData обратно, где вы его нашли.

putImageData имеет эти параметры (imageDataObject, x-координата, y-координата).

Вы не устанавливаете альфа-компонент пикселя (tempData.data [3]). Это означает, что если пиксель был прозрачным (данные [3] === 0), то замененный цвет не будет отображаться (он также прозрачен). Я предполагаю, что вы хотите, но я все равно упомянул об этом.

Кроме того, поскольку getImageData/putImageData являются довольно дорогостоящими операциями, более частое выполнение всех модификаций массива пикселей перед выполнением putImageData.

getImageData (0,0, canvas.width, canvas.height)//получить все пиксели

изменять все пиксельные данные по желанию//изменять все пиксели по желанию

putImageData (TempData, 0,0); // помещаем все измененные пиксели назад на холст в 1 push

JSON — довольно дорогой способ сравнения данных. Вместо этого вы можете использовать javascript-объекты.

Источник

Canvas / фото-getImageData не работает

Я загружаю картинку в canvas; я drawImage(), храню getImageData() в переменной для манипулирования. Я хотел бы иметь возможность манипулировать данными много раз, например: добавлять / удалять различные фильтры. Как я могу хранить данные так, чтобы они обновлялись каждый раз, когда я рисую картинку с putImageData()?

В принципе, я думаю, что неправильно понимаю использование getImageData или использую его неправильно. Моя мысль состояла в том, что любая манипуляция, которая была сделана с изображением, я мог бы запустить getImageData и обновить переменную, которая содержала информацию, и использовать ее для «redraw» изображения.

Пример: В приведенном ниже фрагменте кода я запускаю функцию, которая превращает изображение в черно-белое. У меня есть еще одна функция, которая изменяет размер изображения при нажатии. Когда я изменяю размер изображения, черно-белый фильтр исчезает . Что я делаю не так, чтобы сохранить информацию о картине?

1 ответ

Я использую html5 canvas для рендеринга и изображения, делаю некоторое базовое редактирование изображения, чем пытаюсь использовать функцию getImageData(0 для чтения пикселей и выполнения некоторой работы. Я заметил, что независимо от того, какая битовая глубина исходного изображения (8 бит , 16.

Как преобразовать getImageData в todataUrl code lines: var data = ctx.getImageData(150,200,200,100); var data = document.getElementById(canvas).toDataURL(‘image/gif’); Первая ситуация: 1 параметр x space, 2 y space, 3 и 4 x, y пример изображения: http://postimg.org/image/lfogtwjn7/ Итак, я получил.

imageData — это снимок данных canvas пикселя. В вашем случае это все данные canvas (цветные, а не B&W) пиксель).

Поэтому, когда вы делаете .putImageData(imageData. ) , неизмененный snapshow снова отображается на canvas.

Если вы хотите изменить масштаб B&W версии вашего изображения:

Нарисуйте свое цветное изображение на новом canvas, созданном с помощью var memCanvas = document.createElement . Размер canvas соответствует размеру изображения. canvas можно оставить в памяти-нет необходимости вставлять его в DOM.

Примените фильтр к новому canvas с getImageData , измените данные пикселей, putImageData . Теперь у вас есть «image-canvas», который вы можете позже использовать для изменения размера и т. Д.

Нарисуйте изображение-Canvas на видимом canvas: context.drawImage(memCanvas,0,0) . Да, memCanvas может быть источником изображения для drawImage .

Чтобы масштабировать версию изображения B&W, просто очистите canvas, масштабируйте canvas с context.scale &, а затем нарисуйте масштабированное изображение B&W с drawImage(memCanvas,0,0)

Если позже вы захотите повторно масштабировать изображение B&W, вы можете сделать Step#4 снова.

Пример кода и демонстрационная версия с использованием фильтра оттенков серого:

Я хочу изменить цветное изображение на серую шкалу, но при попытке использовать getImageData у меня возникает ошибка безопасности. Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data. Я знаю, что эта ошибка.

Когда я использую функцию getImageData() для получения данных изображения с помощью chrome, она говорит, что Uncaught IndexSizeError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: the source width is 0. Вот мой код: .

Похожие вопросы:

В HTML5 Canvas, после вызова translate(), getImageData() возвращает преобразованное изображение или нет?

Часть моего приложения включает в себя редактирование фотографий html5 с использованием смеси стандартных контекстных холстов 2d и webGL. Во всяком случае, я сохраняю ‘undo’ состояний, пока.

Я пытаюсь подобрать цвет из пикселя изображения с помощью этого простого кода :

html5 canvas всегда возвращает 8 бит цвета при использовании getImageData()

Canvas как конвертировать getImageData в формат toDataUrl

HTML5 Canvas getImageData Ошибка Безопасности

HTML5 canvas getImageData() не может работать

ускорьте getImageData canvas

canvas getImageData не работает

Получить цвета пикселей от HTML Canvas WITHOUT getImageData()?

Источник

Javascript метод getImageData()

Метод getImageData() возвращает объект ImageData, который копирует пиксельные данные заданной прямоугольной области холста.

Примечание: Объект ImageData это не изображение. Он представляет часть (прямоугольную область) холста и содержит информацию о каждом пикселе данной прямоугольной области.

R — Красный цвет (0-255)
G — Зеленый цвет (0-255)
B — Синий цвет (0-255)
A — Альфа-канал (0-255; 0 — прозрачный, 255 — полностью видимый)

Информация о цвете/прозрачности храниться в массиве в свойстве data объекта ImageData.

После манипулирования с этими данными их можно скопировать обратно на холст при помощи метода putImageData().

Пример:

Получить цветовую информацию по первому пикселю объекта ImageData можно при помощи следующего кода:

Примечание: При помощи метода getImageData() можно инвертировать цвет каждого пикселя изображения на холсте. Для этого нужно в цикле изменить цвет всех пикселей, используя следующую формулу:

JavaScript синтаксис:

context.getImageData(x, y, width, height);

Значения параметров

Параметр	Описание
x	Координата X (в пикселях) верхнего левого угла копируемой области
y	Координата Y (в пикселях) верхнего левого угла копируемой области
width	Ширина копируемой области
height	Высота копируемой области

Пример использования

Пример №1

Следующий код копирует пиксельные данные определенной прямоугольной области на холсте при помощи метода getImageData(), а затем возвращает их обратно при помощи метода putImageData():

Изображение для примера:

Пример №2

Используем метод getImageData(), чтобы инвертировать цвет каждого пикселя изображения на холсте:

Ваш браузер не поддерживает HTML5 тег canvas.

Источник