преодоление ограничений на разные источники для glfx.js / webgl - PullRequest
Новая
       8

преодоление ограничений на разные источники для glfx.js / webgl

0 голосов
/ 08 июня 2018

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

До сих пор единственная библиотека, которую я нашел, по крайней мере, поддерживает части этого, это glfx.js.

Когда я запускаю 

<!DOCTYPE html>

<html lang="en">

<head>
    <title>Document</title>
    <script src="https://unpkg.com/glfx-es6/dist/glfx-es6.min.js"> 
</script>
</head>

<body>
    <img id="image" src="lenna.png">
    <script>
        window.onload = function () {
            // try to create a WebGL canvas (will fail if WebGL isn't supported)
            try {
                var canvas = fx.canvas();
            } catch (e) {
                alert(e);
                return;
            }

            // convert the image to a texture
            var image = document.getElementById('image');
            var texture = canvas.texture(image);

            // apply the ink filter
            canvas.draw(texture).ink(0.25).update();
        };
    </script>
</body>
</html>

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

Uncaught DOMException: не удалось выполнить 'texImage2D' для 'WebGLRenderingContext': элемент изображения содержит данные из разных источников и не может быть загружен.

Любой способ преодоления ограничений из разных источников для webgl?

Я пытался добиться чего-то похожего с opencv.js и node-opencv (https://github.com/peterbraden/node-opencv), но безуспешно. Я предполагаю, что регулировка контрастности будет слишком медленной, если она не выполняется на видеокарте клиентаоднако.

Возможно, я пропустил другие подходы.

...