jsdoでopencv.js

#概要

jsdoでopencv.jsやってみた。
SandBox作ってみた。

#成果物

http://jsdo.it/ohisama1/kjK2

#写真

![](http://jsdo-static-contents.s3.amazonaws.com/images/capture/k/j/K/kjK2.jpg?t=1550033372)


#サンプルコード

```
var errorOutput = document.getElementById('errorMessage');
const OPENCV_URL = 'https://docs.opencv.org/3.4.1/opencv.js';
function loadOpenCv(onloadCallback) {
    let script = document.createElement('script');
    script.setAttribute('async', '');
    script.setAttribute('type', 'text/javascript');
    script.addEventListener('load', () => {
        onloadCallback();
    });
    script.addEventListener('error', () => {
        printError('Failed to load ' + OPENCV_URL);
    });
    script.src = OPENCV_URL;
    let node = document.getElementsByTagName('script')[0];
    node.parentNode.insertBefore(script, node);
};
function createFileFromUrl(path, url, callback) {
    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function(ev) {
        if (request.readyState === 4)
        {
            if (request.status === 200)
            {
                let data = new Uint8Array(request.response);
                cv.FS_createDataFile('/', path, data, true, false, false);
                callback();
            }
            else
            {
                printError('Failed to load ' + url + ' status: ' + request.status);
            }
        }
    };
    request.send();
};
function loadImageToCanvas(url, cavansId) {
    let canvas = document.getElementById(cavansId);
    let ctx = canvas.getContext('2d');
    let img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height);
    };
    img.src = url;
};
function executeCode(textAreaId) {
    try 
    {
        clearError();
        let code = document.getElementById(textAreaId).value;
        eval(code);
    }
    catch (err)
    {
        printError(err);
    }
};
function clearError() {
    errorOutput.innerHTML = '';
};
function printError(err) {
    if (typeof err === 'undefined')
    {
        err = '';
    } 
    else if (typeof err === 'number')
    {
        if (!isNaN(err))
        {
            if (typeof cv !== 'undefined') 
            {
                err = 'Exception: ' + cv.exceptionFromPtr(err).msg;
            }
        }
    }
    else if (typeof err === 'string')
    {
        let ptr = Number(err.split(' ')[0]);
        if (!isNaN(ptr)) 
        {
            if (typeof cv !== 'undefined')
            {
                err = 'Exception: ' + cv.exceptionFromPtr(ptr).msg;
            }
        }
    } 
    else if (err instanceof Error)
    {
        err = err.stack.replace(/\n/g, '<br>');
    }
    errorOutput.innerHTML = err;
};
function loadCode(scriptId, textAreaId) {
    let scriptNode = document.getElementById(scriptId);
    let textArea = document.getElementById(textAreaId);
    if (scriptNode.type !== 'text/code-snippet')
    {
        throw Error('Unknown code snippet type');
    }
    textArea.value = scriptNode.text.replace(/^\n/, '');
};


loadCode('codeSnippet', 'codeEditor');
loadImageToCanvas('/assets/7/O/X/3/7OX3z.png', 'canvasInput');
let tryIt = document.getElementById('tryIt');
tryIt.addEventListener('click', () => {
    executeCode('codeEditor');
});
loadOpenCv(() => {
    tryIt.removeAttribute('disabled');
});

```

以上。