diff options
| -rw-r--r-- | noisia.html | 15 |
1 files changed, 12 insertions, 3 deletions
diff --git a/noisia.html b/noisia.html index 39168ac..146ac08 100644 --- a/noisia.html +++ b/noisia.html @@ -168,7 +168,7 @@ decay = function(context, x, y, w, h, r) { <script type="text/html" id="template"> <div id="curtain" style="opacity:0;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0;background:rgba(255,255,255,0.1);"></div> <div id="outline" style="border:1px solid white;background:rgba(0,255,255,0.5);opacity:0.5; position: absolute;pointer-events:none"></div> -<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;width:300px; padding: 4px;cursor:default;"> +<div id="controls" style="position: absolute;top:50px;right:50px;background:rgba(0,0,0,0.8);color:#fff;font-size:14px;min-width:300px; padding: 4px;cursor:default;"> frames <input type="text" id="framecount" value="30" style="width:30px;"> delay <input type="text" id="framedelay" value="0.06s" style="width:30px;"> <button id="record" disabled>record</button> @@ -180,6 +180,8 @@ decay = function(context, x, y, w, h, r) { <script type="text/javascript" src="js/vendor/gif-encode/util.js"></script> <script type="text/javascript" src="js/vendor/gif-encode/tube.js"></script> <script type="text/javascript" src="js/vendor/gif-encode/client.js"></script> +<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script> +<script type="text/javascript" src="js/vendor/dataUriToBlob.js"></script> <script type="text/javascript"> (function(){ var canvases = document.getElementsByTagName("canvas") @@ -261,6 +263,7 @@ decay = function(context, x, y, w, h, r) { last_t = +new Date() requestAnimationFrame(recordloop) status("recording") + disable("record") } function recordloop(){ var canvas = document.createElement("canvas") @@ -297,8 +300,8 @@ decay = function(context, x, y, w, h, r) { encoder.reset() encoder.addFrames(frames, delay) status("encoding") - encoder.encode() try { + encoder.encode() } catch (e) { rendering = false @@ -321,8 +324,14 @@ decay = function(context, x, y, w, h, r) { document.getElementById("preview").innerHTML = "" document.getElementById("preview").appendChild(image) rendering = false + enable("record") + enable("save") } - function save(){ + function save (){ + if (! lastGif) return; + var filename = (window.location.host + window.location.pathname).replace(/[^a-zA-Z0-9]/g,"-").replace(/-+/,"-") + var blob = dataUriToBlob(lastGif) + saveAs(blob, filename + "-" + (+new Date()) + ".gif"); } function filesize(n) { if (n < 1e3) return n + " bytes" |