Как легко импортировать OpenCV. js в файл. js? - PullRequest
Новая
       22

Как легко импортировать OpenCV. js в файл. js?

0 голосов
/ 17 июня 2020

Я реализовал CNN, который использую в веб-приложении через Tensorflow. js.

Мне нужно предварительно обработать фотографии с веб-камеры, чтобы они были приняты моей моделью CNN. Итак, я хочу использовать OpenCV. js в моем .js файле, но я не могу понять, как просто импортировать эту библиотеку в мой. js файл, где я превращаю свой элемент canvasElement в тензор с помощью функции tf.browser.fromPixels() of Tensorflow. js.

Уроки, которые я вижу, показывают использование OpenCV. js в файле .html непосредственно внутри <script>, тогда как я хотел бы использовать его в своем javascript файл.

Особенно хотелось бы воспользоваться методом cv.cvtColor(). Если нет, есть ли у вас другое решение для преобразования моего элемента canvasElement в оттенки серого?

1 Ответ

0 голосов
/ 17 июня 2020

Тег script импортирует OpenCV на веб-страницу (обязательно загрузите его перед загрузкой кода, который должен его использовать - порядок имеет значение в HTML). Затем у вас должна быть возможность получить доступ к классу / объекту OpenCV для вызова его функций с данными холста для предварительной обработки, а затем записать это обратно и преобразовать в тензор в TF. js land.

Если вы хотите быстро преобразовать холст в оттенки серого, есть много способов сделать это - например, то, как вы усредняете цвета et c, повлияет на получаемое вами изображение в оттенках серого.

Вот один из способов: http://www.vapidspace.com/coding/2012/02/26/converting-images-to-grayscale-using-the-canvas/

Вот код с этого сайта на случай, если он будет удален: 

function grayscale (input,output) {
    //Get the context for the loaded image
    var inputContext = input.getContext("2d");
    //get the image data;
    var imageData = inputContext.getImageData(0, 0, input.width, input.height);
    //Get the CanvasPixelArray
    var data = imageData.data;

    //Get length of all pixels in image each pixel made up of 4 elements for each pixel, one for Red, Green, Blue and Alpha
    var arraylength = input.width * input.height * 4;
    //Go through each pixel from bottom right to top left and alter to its gray equiv

    //Common formula for converting to grayscale.
    //gray = 0.3*R + 0.59*G + 0.11*B
    for (var i=arraylength-1; i>0;i-=4)
    {
        //R= i-3, G = i-2 and B = i-1
        //Get our gray shade using the formula
        var gray = 0.3 * data[i-3] + 0.59 * data[i-2] + 0.11 * data[i-1];
        //Set our 3 RGB channels to the computed gray.
        data[i-3] = gray;
        data[i-2] = gray;
        data[i-1] = gray;

    }

    //get the output context
    var outputContext = output.getContext("2d");

    //Display the output image
    outputContext.putImageData(imageData, 0, 0);
}

Обратите внимание, как они используют формулу для вычисления c серого. В зависимости от ваших потребностей вы можете использовать другую крысу ios смеси RGB для получения изображения в градациях серого.

Лично я настоятельно рекомендую использовать здесь vanilla JS, так как это очень легко сделать, а вы не нужно включить OpenCV только для того, чтобы использовать оттенки серого, что является огромными накладными расходами для включения этого файла для такой задачи. Если вы также используете некоторые из более продвинутых функций OpenCV, то, возможно, это причина для его использования.

...