Учебник - Добавление OpenCV JS в проект ELECTRON - PullRequest
Новая
       93

Учебник - Добавление OpenCV JS в проект ELECTRON

1 голос
/ 04 апреля 2020

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

Я под управлением windows 10 и занимаюсь разработкой приложения Electron под управлением Node v12.16.1 и electronic v8.2.0.

Я следовал различным учебным пособиям, и ни одному из них не удалось или не удалось сломаться каким-либо другим запутанным способом. Я попробовал opencv4 nodejs и другие решения, и это стало самым надежным способом заставить OpenCV js работать.

Вот как мне удалось заставить его работать: 

<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady()" type="text/javascript"></script>

просто добавьте эту строку в конец вашего HTML файла. Этот скрипт автоматически загрузит предварительно скомпилированный файл js с сайта OpenCV, который, я уверен, они никогда не упоминают. Этот сценарий в значительной степени эквивалентен let cv = require('cv') или подобным вещам, которые я видел. После загрузки этого файла он будет вызывать onOpenCvReady().

. В вашем файле HTML вы можете просто запустить пример с веб-сайта OpenCV. 

<script>
let imgElement = document.getElementById('imageSrc');
let inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', (e) => {
  imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);

imgElement.onload = function() {
  let mat = cv.imread(imgElement);
  cv.imshow('canvasOutput', mat);
  mat.delete();
};

// Entry Point: 
function onOpenCvReady() {
  document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
}
</script>

Надеюсь, это сработает для вас!

Мой пример выглядит примерно так:

image
...