Hello World / plɹoM ollǝH

Programmers Live in Vain

CryptoJSで画像を暗号化してみたり

https://code.google.com/archive/p/crypto-js/

ただやってみただけ

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ANGOUKA</title>
</head>
<body>
    <input id="selfile" type="file" /><br />
    <image id="preview"></image><br />
    <input id="password" type="text" value="password" /><br />
    <input id="encrypt" type="button" value="encrypt" /><br />
    <textarea id="encdata"></textarea><br />
    <input id="decrypt" type="button" value="decrypt" /><br />
    <image id="restore"></image><br />
    <script src="js/crypto-js/rollups/aes.js"></script>
    <script src="js/crypto-js/rollups/sha256.js"></script>
    <script>
        window.onload = function () {
            var selfile = document.getElementById("selfile");
            var encrypt = document.getElementById("encrypt");
            var preview = document.getElementById("preview");
            var password = document.getElementById("password");
            var encdata = document.getElementById("encdata");
            var decrypt = document.getElementById("decrypt");
            var restore = document.getElementById("restore");

            selfile.addEventListener("change", function () {
                var url = selfile.files[0];
                if (!url) return;
                var fr = new FileReader();
                fr.onload = function () { preview.src = fr.result; }
                fr.readAsDataURL(url);
            });

            encrypt.addEventListener("click", function () {
                var h = CryptoJS.SHA256(password.value).toString(CryptoJS.enc.Base64);
                encdata.value = CryptoJS.AES.encrypt(preview.src, h).toString();
            });

            decrypt.addEventListener("click", function () {
                var h = CryptoJS.SHA256(password.value).toString(CryptoJS.enc.Base64);
                restore.src = CryptoJS.AES.decrypt(encdata.value, h).toString(CryptoJS.enc.Utf8);
            });
        };
    </script>
</body>
</html>