Как правильно загрузить XML-файл в ReactJS?

Я работаю над проектом MERN Stack для университета, где пользователи могут загружать фотографии автомобилей, и я хочу использовать opencv, чтобы размыть номерные знаки, поэтому мне нужно использовать файл «haarcascades» для идентификации области. вот соответствующий код:

  const handlePhotosChange = async (e) => {
    const { files } = e.target;
    const selectedPhotos = Array.from(files);

    for (const photo of selectedPhotos) {
      const img = new Image();
      img.src = URL.createObjectURL(photo);

      await new Promise((resolve) => {
        img.onload = () => {
          resolve();
        };
      });

      const mat = cv.imread(img);
      const gray = new cv.Mat();
      cv.cvtColor(mat, gray, cv.COLOR_RGBA2GRAY);

      const licensePlateCascade = new cv.CascadeClassifier();
      const cascadeLoaded = licensePlateCascade.load(
        "haarcascade_license_plate_rus_16stages.xml"
      );
      console.info("1");
      if (cascadeLoaded) {
        console.info("2");
        const plates = new cv.RectVector();
        const minSize = new cv.Size(30, 30);
        licensePlateCascade.detectMultiScale(gray, plates, 1.1, 3, 0, minSize);

        for (let i = 0; i < plates.size(); i++) {
          const plate = plates.get(i);
          const plateMat = gray.roi(plate);
          cv.GaussianBlur(plateMat, plateMat, new cv.Size(5, 5), 0);
          plateMat.delete();
        }

        const blurredImg = new Image();
        blurredImg.src = URL.createObjectURL(
          new Blob([cv.imencode(".jpg", mat)], { type: "image/jpeg" })
        );
        const blurredBlob = await fetch(blurredImg.src).then((res) =>
          res.blob()
        );

        selectedPhotos[selectedPhotos.indexOf(photo)] = blurredBlob;

        plates.delete();
      }

      mat.delete();
      gray.delete();
      licensePlateCascade.delete();
    }

    setPhotos(selectedPhotos);
  };

у меня проблема именно с этой строкой:

      const cascadeLoaded = licensePlateCascade.load(
        "haarcascade_license_plate_rus_16stages.xml"
      );

в момент выполнения кода я получаю эту ошибку в консоли:

[ОШИБКА: [email protected]] global persistence.cpp:531 open Невозможно открыть файл: 'haarcascade_license_plate_rus_16stages.xml' в режиме чтения

Я попытался указать полный путь, используя ссылку на GitHub, разместив файл в открытом доступе и поместив код и файлы на серверную часть. ничего не получалось.

ожидаемое поведение: файл загружается без ошибок.

Я вижу результаты поиска, датированные 2018 годом, но есть и более новые stackoverflow.com/questions/54162946/…

Christoph Rackwitz 18.05.2024 23:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
53
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

благодаря комментарию @Christoph Rackwitz я смог найти решение

что тебе необходимо сделать:

1- получите utils.js из репозитория OpenCV на GitHub.

2- чтобы он работал правильно, вам нужно добавить к нему эту строку (используйте относительный путь к используемому вами opencv.js)

import * as cv from "../opencv/opencv";

3- импортируйте его в компонент, в котором вы хотите использовать харкаскад.

import Utils from "../assets/utils";

также обязательно импортируйте opencv.js.

4. Затем вам нужно будет вставить выбранный вами файл haarcascade /public.

5- присвоить его переменной:

const xmlURL = "haarcascade_xxxx_license_plate.xml";

6. Хорошо, мы воспользуемся createFileFromUrl() из utils.js и загрузим наш файл haarcascade:

utils.createFileFromUrl(xmlURL, xmlURL, () => {
     licensePlateCascade.load(xmlURL);

вот полная функция для вашего удобства:

  const handleLicensePlateDetection = async (e) => {

try {
  console.info("Starting license plate detection...");

  // Clean up previous resources if necessary
  if (window.src) window.src.delete();
  if (window.gray) window.gray.delete();
  if (window.plates) window.plates.delete();
  if (window.licensePlateCascade) window.licensePlateCascade.delete();

  const file = e.target.files[0];
  const reader = new FileReader();
  reader.onload = async () => {
    console.info("Image loaded successfully.");
    const image = new Image();
    image.src = reader.result;
    image.onload = async () => {
      console.info("Converting image to grayscale...");
      const src = cv.imread(image);
      const gray = new cv.Mat();
      cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY, 0);

      console.info("Loading Haar Cascade XML file...");
      const licensePlateCascade = new cv.CascadeClassifier();
      const xmlURL = "haarcascade_xxx_license_plate.xml"; // Path to the XML file
      utils.createFileFromUrl(xmlURL, xmlURL, () => {
        try {
          licensePlateCascade.load(xmlURL);
          console.info("Haar Cascade XML file loaded successfully.");

          console.info("Detecting license plates...");
          const plates = new cv.RectVector();
          const msize = new cv.Size(0, 0);
          licensePlateCascade.detectMultiScale(
            gray,
            plates,
            1.1,
            3,
            0,
            msize,
            msize
          );

          console.info("Applying Gaussian blur to detected plates...");
          for (let i = 0; i < plates.size(); ++i) {
            try {
              const plate = plates.get(i);
              const roi = src.roi(plate);
              cv.GaussianBlur(
                roi,
                roi,
                new cv.Size(23, 23),
                40,
                40,
                cv.BORDER_DEFAULT
              );
              roi.delete();
            } catch (error) {
              console.error(
                "Error applying Gaussian blur to plate:",
                error
              );
            }
          }

          console.info("Displaying the result...");
          cv.imshow("canvas", src);

          // Clean up
          src.delete();
          gray.delete();
          plates.delete();
          licensePlateCascade.delete();
        } catch (error) {
          console.error("Error loading Haar Cascade XML file:", error);
        }
      });
    };
  };
  reader.readAsDataURL(file);
} catch (error) {
  console.error("Error initializing license plate detection:", error);
}
  };

примечание: я новичок в этой теме «ИИ», и мне нужна была помощь ИИ, поэтому я не понимаю большую часть того, что только что вставил.

Вы пробовали то, что только что опубликовали, и действительно ли это работает?

Christoph Rackwitz 20.05.2024 23:28

@ChristophRackwitz Я опубликовал это только после тщательного тестирования, оно работает хорошо. единственная проблема заключается в том, что я не могу выбрать другую фотографию после этого, мне приходится перезагружать страницу или даже несколько фотографий, если уж на то пошло. Но это выходит за рамки данной темы. Я как-нибудь разберусь с этим. Если у вас есть вопросы, не стесняйтесь спросить.

Brahim 21.05.2024 11:33

хорошо хорошо. просто убедившись, что выход AI действительно проверен. это проблема на сайте с тех пор, как стал доступен ChatGPT.

Christoph Rackwitz 21.05.2024 15:03

Другие вопросы по теме