testpage.html

﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>gif2asvg test page</title>
    <style type="text/css">
        .output {
            border: 1px solid gray;
            height: 500px;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div>
    <span>select an gif image</span>
    <input id="inputGifSelect" type="file" accept="image/gif"/>
</div>
<div>
    <span>Encode to base64</span>
    <input id="inputEncodeToBase64" type="checkbox" checked="checked"/>
</div>
            <div class="output">
                <img id="inputRawImg"/>
                <span>|</span>
                <img id="outputSvgImg" />
            </div>
<div>
    <textarea id="outputSvg" cols="150" rows="20"></textarea>
</div>
<script src="libgif.js"></script>
<script src="global-is-node-flag.js"></script>
<script src="dist/image-info.js"></script>
<script src="dist/gif2asvg.js"></script>
<script src="gif2asvg-overrides.js"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function () {
        var inputEncodeToBase64Element = document.getElementById('inputEncodeToBase64');
        var encodeToBase64 = inputEncodeToBase64Element.checked;

        function convertImage(data) {
            var inputRawImg = document.getElementById('inputRawImg');
            var outputSvgImg = document.getElementById('outputSvgImg');
            var outputSvg = document.getElementById('outputSvg');

            var converter = new gif2asvg();
            converter.smilSvgAnimationFromBase64Gif(data).then(function(svg) {
                inputRawImg.src = data;
                if (encodeToBase64) {
                    var svgBase64 = converter.encodeSvgAsBase64(svg);
                    outputSvgImg.src = svgBase64;
                    outputSvg.value = svgBase64;

                } else {
                    outputSvgImg.src = 'data:image/svg+xml,' + svg;
                    outputSvg.value = svg;
                }

            });
        }

        inputEncodeToBase64Element.addEventListener('change', function () {
            encodeToBase64 = inputEncodeToBase64Element.checked;
        });

        var inputGifSelect = document.getElementById('inputGifSelect');
        inputGifSelect.addEventListener('change', function (evt) {
            var file = evt.target.files[0];
            var fileReader = new FileReader();
            fileReader.onload = function (e) {
                convertImage(e.target.result);
            };
            fileReader.readAsDataURL(file);


        }, false);
    });

</script>
</body>
</html>