Невозможно загрузить изображение (действие заблокировано политикой cors), пока я установил для перекрестного источника значение anonymous

ProgramBox

Невозможно загрузить изображение (действие заблокировано политикой cors), пока я установил для перекрестного источника значение anonymous

Post author:admin
Запись опубликована:22 марта, 2023
Post category:Вопросы по программированию

#javascript #html

#javascript #HTML

Вопрос:

Итак, я начинаю с машинного обучения на javascript, и я хотел увидеть модель классификатора изображений в действии.

поэтому, когда я пытаюсь загрузить изображение в браузере, оно не работает.

это ошибка, которую я получаю:

 Access to image at 'file:///F:/rishit/ml5/imagerecognition/bird.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

это мой index.html

 <!DOCTYPE html>

<html>
    <head>
<meta charset="utf-8">

<title>ML-5</title>

<script src="https://unpkg.com/ml5@0.4.3/dist/ml5.min.js"></script>

    </head>
<body>
    
<h1 style="text-align: center;" >Image classification</h1>
<img src="bird.png"
 alt="bird" id ="bird"   >
    <script src="script.js"></script>
</body>


</html>

и это мой script.js

 let img = document.getElementById('bird')
img.crossOrigin = 'Anonymous'

let classifier = ml5.imageClassifier('MobileNet',onLoad)

function onLoad(){
    console.log('yay!,its Done')
} 

classifier.classify(img).then(
    (results)=>{console.log(results)}
)

это моя файловая структура

bird.png index.html script.js

Ответ №1:

Вы уверены, что отправляете изображение из нужной папки? Access to image at 'file:///F:/rishit/ml5/imagerecognition/bird.png' из источника ‘null’.

Я не думаю, что вам следует добавлять img.crossOrigin = 'Anonymous' или что-то подобное, скорее всего, что-то не так с тем, как вы обслуживаете свои статические файлы

1. у файла изображения нет отдельной папки, он находится только в родительском каталоге. если я удаляю для перекрестного источника, он по-прежнему выдает ошибку: DOMException: не удалось выполнить ‘texImage2D’ в ‘WebGL2RenderingContext’: элемент изображения содержит данные из разных источников и может не загружаться.

2. попробуйте установить его в теге html, <img src="bird.png" crossorigin="anonymous"/>

3. github.com/ml5js/ml5-library/issues/217#issuecomment-424085565

Ответ №2:

Проблема должна сохраняться, только если вы откроете index.html непосредственно из проводника. Потому что он использует file:// протокол.

Когда вы размещаете его или используете что-то вроде расширения Live Server в Visual Studio Code (что я настоятельно рекомендую), все должно работать нормально, потому что тогда он будет использовать протокол http: //.

Ответ №3:

Я делаю это для своего веб-приложения. Работает как с рабочего стола, так и с веб-сервера, используя только html и javascript. Полезно, если вы не хотите создавать локальный хост на своем ПК.

Удалите ВЕСЬ связанный с перекрестным источником код, который у вас есть. Вам это не понадобится.
В элементе img html удалите имя файла bird и просто сделайте src=‘#’
Добавьте тег html input type = ‘file’ и используйте его для импорта изображения одним нажатием кнопки.
Когда вы получаете изображение таким образом, в javascript вы передадите изображение в средство чтения файлов, т.е. var reader = FileReader; здесь вы преобразуете изображение в данные или двоичный файл. CORS принимает файлы данных, но политика веб-браузеров «того же происхождения» все еще может представлять проблему, поэтому…
Если файл изображения достаточно мал, используйте sessionStorage для сохранения файла в хранилище браузера. Если размер файла превышает 2-5 МБ, просто сделайте все возможное и сохраните его в IndexedDB. С изображениями это очень быстро для сохранения и извлечения и стоит дополнительного кода.
Теперь извлеките файл из хранилища и ‘Бум!’ Вы можете использовать изображение где угодно и как угодно без вмешательства cors! (О да, добавьте его в свой тег img, чтобы увидеть).

Поскольку вы занимаетесь машинным обучением, я предполагаю, что вы знакомы со всеми этими API html и javascript. Я широко использую его для обработки изображений на холсте из файловой системы, что обычно является кошмаром CORS! Если вас интересуют некоторые примеры кода, дайте мне знать.