Bping-crysyan
/
index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">

    <title>Demo</title>
    <script src="lib/jquery-3.1.1.min.js"></script>

    <style type="text/css">
        button:hover,
        input[type=button]:hover {
            background: rgb(9, 147, 240);
        }

        button:active,
        input[type=button]:active {
            background: rgb(10, 118, 190);
        }

        button[disabled],
        input[type=button][disabled] {
            background: none;
            border: 1px solid rgb(187, 181, 181);
            color: gray;
            text-shadow: none;
        }

        body {
            background-image: url("/img");
        }
    </style>
</head>
<body>

<div style="height:760px;" class="crysyan-designer">
    <a id="download-png" download="my-file-name.png" style="color: #ff0206" class="btn btn-github">download png</a>
    <button type="button" id="start-record">start-record</button>
    <button id="stop-record">stop-record</button>
</div>
<div id="videoTag" style="height:500px;"></div>
</body>

</html>
<script src="js/crysyan-designer.js"></script>
<script>
    $(".crysyan-designer").CrysyanDesigner({
        projectPath: "",
        isRecord: true,
        canvas: {
            // px
            width: 1000,
            height: 600
        },
        toolbar: {
            //  widgets: ["CursorWidget", "PencilWidget","ShapeWidget", "EraserWidget", "TextWidget", "UndoWidget", "IndoGoWidget", "ClearWidget"],

        }
    }, function (designer) {
        $("#download-png").click(function () {
            var canvas = designer.getView().crysyanCanvas;
            document.getElementById("download-png").href = canvas.toDataURL();
        });

        console.dir(designer);
        var image = new Image();
        image.src = "http://dream.com:9977/img/pencil.png";
        console.log(image instanceof Image);
        var dataurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAADFBMVEVYWFhVVVUAAABUVFTqqlXjAAAAA3RSTlMxdACUjPeLAAAATElEQVR42u3SQQrAMAwDQSn7/z+XFExTcOxroN3zgC4STecApy1gpP2gBgZXQMwKwJ23QITYACLlQBC9gAFNwJMXoJhVc7lBA/gsuAArEgqPcT12VgAAAABJRU5ErkJggg=="
        designer.drawBackgroupWithImage("../img/crysyan-love.png");

        var videoTag = document.getElementById("videoTag");
        var videoEle;
        var recorder = designer.getCanvasRecorder();
        $("#start-record").click(function () {
            document.getElementById('start-record').disabled = true;
            document.getElementById('stop-record').disabled = false;
            document.getElementById('start-record').innerHTML = "Recording";
            console.log("recording");
            if (videoEle instanceof HTMLVideoElement) videoTag.removeChild(videoEle);
            recorder.initRecorder();
            recorder.startRecording();
        });
        $("#stop-record").click(function () {
            document.getElementById('start-record').disabled = false;
            document.getElementById('stop-record').disabled = true;
            document.getElementById('start-record').innerHTML = "start-record";
            console.log("stop");
            recorder.stopRecording(function () {
                var blob = recorder.getBlob();
                videoEle = document.createElement('video');
                videoEle.src = URL.createObjectURL(blob);
                // videoEle.setAttribute('style', 'height: 100%; position: absolute; top:0; left:0;z-index:9999;width:100%;');
                videoTag.appendChild(videoEle);
                videoEle.controls = true;
                videoEle.play();
            });
        });
    });
</script>