Метод getImageData работает наполовину
Здравствуйте. У меня как-то наполовину работает метод getImageData в канвасе. Когда я рисую квадрат, то эта функция работает нормально, а когда вставляю картинку она вообще не работает. В консоли выдает ошибку:
Код:
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. document.getElementById("scream").onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 0, 0); var imgData = ctx.getImageData(0, 0, c.width, c.height); console.log(imgData.data[0]); // invert colors var i; for (i = 0; i < imgData.data.length; i += 4) { imgData.data[i] = 255 - imgData.data[i]; imgData.data[i+1] = 255 - imgData.data[i+1]; imgData.data[i+2] = 255 - imgData.data[i+2]; imgData.data[i+3] = 255; } ctx.putImageData(imgData, 0, 0); }; Может быть у меня старая версия JavaScript? |
Даша4,
Картинка должна быть загружена на тот же домен, что и страница со скриптом. Картинки с чужого домена не читаются При считывании с локального хоста тож помнится были сложности... вроде как в одной папке со страницей, и то, не со всех браузеров |
да спасибо большое. Наверно эта функция еще не доработана. Я пыталась запустить ее на локальном компе. Просто я решила запустить пример.
|
Даша4, скорее наоборот, передоработана.)
Помнится самые первые версии в бэтах позволяли брать "чужие" картинки, что позволяло воровать информацию с других сайтов и потому эту дырку быстро закрыли.) |
Цитата:
|
Deff, нет, тут суть в ином. Картинки могут генерироваться персонально для человека и содержать конфиденциальные данные. Соответственно злоумышленник таким образом может получить такие картинки по прямым url, т.к. пользователь автоматизирован на целевом сайте, и украсть информацию. Всякие проксики, соответственно, авторизации не имеют, как и доступа к таким вещам.
|
++
Ну да, под логином могут быть конфиденциальные файлы и сведения |
Есть 3 варианта:
1) Атрибут crossorigin для img (поддерживается не во всех браузерах) 2) Загрузка картинки через свой сервер (если есть такая возможность) 3) Если вдруг картинка приходит с CORS-заголовками (что маловероятно), то её можно аяксом загрузить как блоб, передать в URL.createObjectURL, и создать картинку с таким адресом |
Часовой пояс GMT +3, время: 11:01. |