Как решить, что Canvas испорчен данными из разных источников

Я использую библиотеку face_detection или API из этого руководства на youtube https://www.youtube.com/watch?v=FfHilvUc25c Я пробовал то же самое, но получаю сообщение об ошибке, что холст испорчен данными перекрестного происхождения. В моем index.html нет холста.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="jquery.facedetection.min.js"></script>
    <script>
        $(document).ready(function(){
            $('#picture').faceDetection({
                complete: function (faces) {
                    console.log(faces);
                }
            });
        })
    </script>

  <img id="picture" src="img/face1.jpg">

Я ожидал получить массив в консоли, но ничего не напечатано, кроме ошибки, в которой говорится: «Не удалось выполнить getImageData на« CanvasRenderingContext2D »: холст испорчен данными из разных источников».


person Bhaumik Bhatt    schedule 30.08.2019    source источник
comment
Вы запускаете это на локальном сервере? Как файл в HTML? Это имеет значение. Если вы используете только файл, который вы открыли из Finder или Explorer, он будет завершиться ошибкой, поскольку любой файл, обслуживаемый вашей ОС, является запрещенным и испортит холст, используемый здесь для обнаружения лиц. Библиотеке необходимо читать данные изображения, но если источник неизвестен или небезопасен, ваш холст будет испорчен и больше не будет использоваться. Многие современные функции (например, использование локальной камеры) также доступны только при обслуживании с веб-сервера для вашей безопасности.   -  person somethinghere    schedule 30.08.2019
comment
Поскольку это обычный HTML-файл, я запускаю его в Chrome. И я предоставляю изображения из той же папки   -  person Bhaumik Bhatt    schedule 30.08.2019
comment
Да, это не сработает, вам нужно будет развернуть локальный сервер, иначе браузер сочтет это запросом на другой источник, и холст будет испорчен. Протокол file:// рассматривает каждый файл как свой собственный сервер - это делается для того, чтобы злонамеренный хакер не отправлял HTML-файл, который затем просматривает содержимое вашего жесткого диска при двойном щелчке по нему. Если вы не знакомы, достойный способ запустить локальный сервер при запуске - это использовать такое приложение, как MAMP, а затем указать его на свою папку.   -  person somethinghere    schedule 30.08.2019
comment
Да, теперь это работает, когда я использовал локальный сервер. Спасибо   -  person Bhaumik Bhatt    schedule 30.08.2019
comment
Ответ, который вы предоставили, работает нормально. Можете ли вы опубликовать это как ответ вместо комментария, чтобы я мог его принять?   -  person Bhaumik Bhatt    schedule 03.09.2019


Ответы (1)


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

Вы можете использовать локальный сервер (например, MAMP, если вам нужен графический интерфейс, иначе сервер Browsersync в узле будет работать нормально), чтобы иметь возможность получать доступ и управлять файлами, размещенными на том же сервере. Есть еще кое-что, но ознакомьтесь с документами MDN об этом явлении: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

person somethinghere    schedule 03.09.2019