ocrad.js- библиотека JavaScript OCR, генерирующая Uncaught SecurityError при передаче холста HTML5 в API OCRAD()

Я новичок в HTML5+JS, я хочу разработать гибридное приложение, используя ocrad.js,

Код, приведенный ниже, скачанный со страницы github, отлично работает для меня (Chrome 32.0.1).

<html>
    <head>
    </head>
    <body>
        <script src="../ocrad.js"></script>
        <script>
            function OCRImage(image){
                var canvas = document.createElement('canvas')
                canvas.width  = image.naturalWidth;
                canvas.height = image.naturalHeight;
                canvas.getContext('2d').drawImage(image, 0, 0)
                return OCRAD(canvas)
            }

            function OCRPath(url, callback){
                var image = new Image()
                image.src = url;
                image.onload = function(){ callback(OCRImage(image)) }
            }

            function OCRFile(file, callback){
                var reader = new FileReader();
                reader.onload = function(){ OCRPath(reader.result, callback); }
                reader.readAsDataURL(file)
            }
        </script>
        <input type="file" onchange="OCRFile(this.files[0], function(text){alert(text)})">
    </body> 
</html>

Когда я позвонил OCRAD() API в моем коде это дает Uncaught SecurityError: Не удалось выполнить 'getImageData' для 'CanvasRenderingContext2D': холст был испорчен данными из разных источников.

Мой код

<html>
<head>
    <script src="../ocrad.js"></script>
<body>
<canvas id="cancan" width="800", height="500">Test image</canvas>
<script type="text/javascript">

function imageLoaded(ev) {
    element = document.getElementById("cancan");
    c = element.getContext("2d");
    im = ev.target;
    width = element.width;
    height = element.height;
    c.drawImage(im, 0, 0);
    var data1=OCRAD(c);
    console.log(data1);
}

im = new Image();
im.src = "message.png";
im.onload = imageLoaded;
</script>
</body> 
</html>

Я видел подобные вопросы и ответы Stackru здесь, но это не помогло мне решить проблему. Пожалуйста, ответьте, если у кого-либо был комментарий по этому вопросу, который работал с Ocrad.js.

ИЛИ ЖЕ

Есть ли другой способ передать мой файл изображения (здесь message.png во втором примере кода) в качестве аргумента OCRFile() функция в первом примере кода? (Просто я хочу передать изображение, хранящееся в локальном файле URL, OCRAD() Звоните, чтобы вернуть текст.)

Заранее спасибо....:)

Источник

1 ответ

Решение

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

Вам либо нужно:

  • Переместить изображение в тот же источник, что и страница (источник = домен, порт и протокол)
  • Запросите использование CORS от другого источника, если вы не можете переместить изображение
  • Используйте прокси-страницу для загрузки изображения (см. Один в действии здесь - примечание: я не знаю этот сайт, поэтому используйте его только для тестирования с некритическими данными).

Запрос может быть сделан следующим образом (при условии im содержит изображение, которое вы хотите обработать OCR):

function imageLoaded(ev) {
    element = document.getElementById("cancan");
    c = element.getContext("2d");
    width = element.width;
    height = element.height;
    c.drawImage(this, 0, 0);  // 'this' = current image loaded
    var data1 = OCRAD(c);
    console.log(data1);
}

var im = new Image();
im.onload = imageLoaded;      // set onload before src
im.crossOrigin = 'anonymous'; // request CORS usage before setting src
im.src = "message.png";

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

В этом случае только перемещение изображения или настройка прокси-страницы для загрузки внешнего изображения позволит использовать его. Обратите внимание, что file:// или локальные файлы считаются разными источниками.

Прокси-страница - это, по сути, страница, на которую вы передаете URL-адрес изображения в качестве аргумента. Затем страница на стороне сервера загрузит изображение и передаст данные обратно на первую (запрашивающую) страницу. Таким образом, вы можете "передавать" изображение через ваш собственный сервер, снимая ограничения CORS, но за счет увеличения трафика на вашем собственном сервере. Некоторые серверы также могут блокировать этот подход, отказывая во внешнем доступе (т. Е. По рефереру или IP и т. Д.)

Смотрите https://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing для более подробной информации.

Источник
Другие вопросы по тегам