examples/yassinevic/index.html

<!doctype html>
<html>
<head>
    <title>yassinevic</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="/../../cbl.js"></script>
    <style>
        #debugPreprocessed img {
            display: block;
        }
        .note {
            margin: 0 0 15px 0;
            font-weight: bold;
        }
        img {
            margin: 5px 5px 0 0;
        }
    </style>
</head>
<body>
    <div class="note">
        Example in response to <a href="https://github.com/skotz/cbl-js/issues/41">Question #41</a>.
        Demonstrates horizontal line removal.
    </div>
    <div class="main">
        <div id="debugPreprocessed"></div>
        <div id="debugSegmented"></div>
        <div id="solution"></div>
        <div id="visualizeModel"></div>
    </div>
    <script>
        var cbl = new CBL({
            preprocess: function(img) {
                img.debugImage("debugPreprocessed");
                img.cropRelative(22, 2, 22, 2);
                img.debugImage("debugPreprocessed");
                img.removeLight(16);
                img.debugImage("debugPreprocessed");
                img.removeHorizontalLine(2);
                img.debugImage("debugPreprocessed");
                img.colorRegions(50, true, 0);
                img.debugImage("debugPreprocessed");
            },
            character_set: "0123456789abcdefghijklmnopqrstuvwxyz",
            exact_characters_width: 20,
            exact_characters_play: 3,
            exact_characters: 5,
            blob_min_pixels: 50,
            blob_max_pixels: 10000,
            pattern_width: 30,
            pattern_height: 30,
            allow_console_log: true,
            blob_console_debug: true,
            perceptive_colorspace: true,
            blob_debug: "debugSegmented"
        });

        cbl.train("7hg74.png");
        cbl.train("88f88.png");
        cbl.train("358r3.png");
        cbl.train("bw6bn.png");
        cbl.train("cryy7.png");
        cbl.train("f2562.png");
        cbl.train("kemxd.png");
        cbl.train("w3m7b.png");
        cbl.train("w8g5b.png");
        cbl.train("xk557.png");

        var saveModel = function() {
            cbl.condenseModel();
            cbl.sortModel();
            cbl.visualizeModel("visualizeModel");
            cbl.saveModel();
        }
    </script>
</body>
</html>