forked from jpgcrypt/jpgcrypt.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1 lines (1 loc) · 3.93 KB
/
index.html
1
<!doctype html><link rel=manifest href=manifest.webmanifest><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1"><meta charset=utf-8><title>jpgcrypt</title><script src=jquery.min.js></script><script src=filesaver.js></script><style>#preview-container{position:relative;display:inline-block;width:80%;border:#fff 1px dashed;border-radius:5px;background:#eee;overflow:hidden}#preview-port{overflow:auto;height:50%}#canvas-container{display:flow-root;width:100%;height:100%;overflow:auto}#canvas{margin:1em}.hidden-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-1}#password,.hidden-input+label,button{font-size:1.25em;font-weight:700;color:#fff;background-color:#000;display:inline-block;cursor:pointer;border-radius:5px;border:none;padding:.5em}.hidden-input:checked+label{background:#3789ff;color:#fff}.hidden-input:focus+label{outline:1px dotted #000;outline:-webkit-focus-ring-color auto 5px}.hidden-input+label:hover{background-color:#3789ff}#password{width:18em;cursor:text;text-align:center}#password,button{margin:.5em}button:enabled:hover{color:#000;background:#fff}button:disabled{color:#404040;cursor:not-allowed}.page{display:none;width:100%;overflow:auto;margin:0;height:100%;min-height:100%}.page h1{margin-top:.5em;text-align:center}.page[name=input]{background:#3789ff;color:#fff}body{margin:0;font-family:sans;overflow:hidden}body,html{height:100%}</style><div class=page name=input><h1>加密/解密一张图片</h1><div style=text-align:center><div id=preview-container><div style=position:absolute;top:2em;left:2em;z-index:10><input class=hidden-input id=fileselector type=file> <label for=fileselector>选择文件</label></div><div style=position:absolute;bottom:2em;left:2em;z-index:10><input class=hidden-input type=radio id=size-768 name=size value=768 checked> <label for=size-768>中等尺寸</label> <input class=hidden-input type=radio id=size-1024 name=size value=1024> <label for=size-1024>较大尺寸</label> <input class=hidden-input type=radio id=size-1536 name=size value=1536> <label for=size-1536>大尺寸</label></div><div id=preview-port><canvas id=preview></canvas></div></div></div><div style=margin-top:2em;text-align:center><input type=password id=password placeholder=输入一个密码，留空将使用默认密码><br><button class=docrypt data-direction=1 data-aggressive=0 disabled>彩色模式加密</button> <button class=docrypt data-direction=1 data-aggressive=1 disabled>黑白模式加密</button> <button class=docrypt data-direction=0 data-aggressive=0 disabled>解密</button></div><div class=hide-in-extension style=text-align:center;font-size:.8em;text-align:center><div style=display:inline-block;width:70%><strong>图片尺寸</strong>: 指定图片宽度，中等尺寸(768px)，较大尺寸(1024px)，大尺寸(1536px)。图片高度将按照比例缩放。 加密时选择大的尺寸更为保密，但耗时更长，且输出图片经历缩小-放大过程后再度解密，容易出现质量损失甚至无法解密的情况。 在解密之前，请选择合适的图片尺寸，将图像中的马赛克大小调整到和网格一致（每个格子正好对应一个方块），以确定图片的原始尺寸。尺寸不正确无法解密。<br><strong>加密模式</strong>: 如果选择彩色模式，将保留图片原有颜色。否则加密结果会变为灰度（黑白）图片。 该模式相比彩色模式增加了一些混淆，保密效果稍好一些。<br></div></div></div><div class=page name=result><div style=position:absolute;right:1em;top:1em;z-index:10;text-align:right id=test><button id=share-output style=display:none>分享</button> <button id=save-output>保存</button> <button class=close-button data-to=input>关闭</button></div><div id=canvas-container><a id=output-image-link><img id=output-image></a></div></div><script src=//cdn.jsdelivr.net/npm/eruda></script><script src=main.js></script><script>0<=window.location.origin.indexOf("dev.")&&eruda.init()</script>