save workin

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"