general util.js

5 files changed, 71 insertions, 119 deletions

diff --git a/gif-animate.html b/gif-animate.html
index 55396cd..7c0b774 100644
--- a/gif-animate.html
+++ b/gif-animate.html
@@ -22,43 +22,22 @@
 <script type="text/javascript" src="js/vendor/gif.js"></script>
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
+var algo = "random"
+var frames;
+var viewer;
+var raf_id;
+
 document.getElementById("url").onchange = load
 load()
 
-function load(imageURL) {
-  document.getElementById("loading").style.display = "inline"
-  var imageURL = proxify( document.getElementById("url").value );
-
-  if (imageURL.substr(-3) === "gif") {
-    window.gif = GIF(imageURL);
-    // gif.on("error", tryToLoadNextImage);
-    // gif.on("rendered", trackLoadTime);
-    gif.on("rendered", ready);
-    return gif.render();
-  } else {
-    window.img = new Image();
-    // img.addEventListener("error", tryToLoadNextImage);
-    img.addEventListener("load", ready);
-    img.crossOrigin = "anonymous";
-    return img.src = imageURL;
-  }
+function load(){
+  var imageURL = document.getElementById("url").value
+  loadImage(imageURL, ready)
 }
 
-function giveImage() {
-  if (imageURL.substr(-3) === "gif") {
-    return gif.frames[gif.currentFrame()].ctx.canvas;
-  } else {
-    return img;
-  }
-}
-
-function proxify (url) {
-  return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
-};
-
-
 function ready(){
   document.getElementById("loading").style.display = "none"
   var buttons = document.getElementsByTagName("button")
@@ -74,9 +53,6 @@ function ready(){
   animate()
 }
 
-var algo = "random"
-var frames;
-var viewer;
 function build(){
   frames = []
 
@@ -88,6 +64,7 @@ function build(){
   viewer = cq(w, h)
   viewer.appendTo("#images")
 }
+
 function dither(frame){
   var canvas = frame.ctx.canvas
   var w = canvas.width, h = canvas.height;
@@ -97,7 +74,6 @@ function dither(frame){
   frames.push(cc)
 }
 
-var raf_id;
 function animate(){
   raf_id = requestAnimationFrame(animate)
   var canvas = frames[gif.currentFrame()].canvas
diff --git a/gif-dither.html b/gif-dither.html
index 359c0b5..84217fc 100644
--- a/gif-dither.html
+++ b/gif-dither.html
@@ -13,7 +13,7 @@
 <button id="pattern4">pattern4</button>
 <button id="pattern3">pattern3</button>
 <!-- <button id="right">right</button> -->
-<input type="text" id="url" value="1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
+<input type="text" id="url" value="img/1376516658960-dumpfm-DoritoWitch-TimeFLyTrans0001.png">
 <button id="encode">ENCODE</button>
 <button id="save">SAVE</button>
 <span id="loading"></span>
@@ -24,10 +24,11 @@
 <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/gif.js"></script>
-<script type="text/javascript" src="js/vendor/FileSaver.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" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
 document.getElementById("url").onchange = load
@@ -37,51 +38,17 @@ function init () {
   bind()
 //  load()
 }
+function load(){
+  document.getElementById("save").style.display = "none"
+  var imageURL = document.getElementById("url").value
+  loadImage(imageURL, ready)
+}
 
+// UI
 function status (s){
   var el = document.getElementById("loading")
   el.innerHTML = s + "..."
 }
-
-function load(imageURL) {
-  document.getElementById("save").style.display = "none"
-  document.getElementById("encode").style.display = "none"
-  status("loading")
-  var imageURL = proxify( document.getElementById("url").value );
-
-  window.gif = window.img = null
-
-  if (imageURL.substr(-3) === "gif") {
-    window.gif = GIF(imageURL);
-    // gif.on("error", tryToLoadNextImage);
-    // gif.on("rendered", trackLoadTime);
-    gif.on("rendered", ready);
-    return gif.render();
-  } else {
-    window.img = new Image();
-    // img.addEventListener("error", tryToLoadNextImage);
-    img.addEventListener("load", ready);
-    img.crossOrigin = "anonymous";
-    return img.src = imageURL;
-  }
-}
-
-function giveImage() {
-  if (imageURL.substr(-3) === "gif") {
-    return gif.frames[gif.currentFrame()].ctx.canvas;
-  } else {
-    return img;
-  }
-}
-
-function proxify (url) {
-  if (url.indexOf("http") == 0)
-    return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
-  else
-    return url
-};
-
-
 function bind(){
   var buttons = document.getElementsByTagName("button")
   for (var i = 0; i < buttons.length; i++) {
@@ -96,6 +63,8 @@ function bind(){
   document.getElementById("encode").onclick = encode
 }
 
+
+
 var encoder = new GifEncoder()
 
 encoder.on("quantized", function(url){
@@ -112,14 +81,6 @@ encoder.on("rendered-url", function(url){
   document.getElementById("save").style.display = "inline"
 })
 
-/*
-var lastGif;
-encoder.on("rendered", function(bits){
-  status("")
-  lastGif = bits
-  document.getElementById("save").style.display = "inline"
-})
-*/
 
 function save (){
   if (!lastGif) return;
@@ -138,6 +99,7 @@ function ready(){
 
 var algo = "random"
 var frames = []
+
 function build(){
   status("dithering")
   encoder.resetFrames()
@@ -149,7 +111,6 @@ function build(){
     for (var i = 0; i < buttons.length; i++) {
       if (buttons[i].id != "save" && buttons[i].id != "encode") bz.push(buttons[i].id)
     }
-    zz = bz
     gif.frames.forEach(function(frame, i){
       var algo = bz[i % bz.length]
       var cc = dither(frame)
diff --git a/gif.html b/gif.html
index 221db89..b282a11 100644
--- a/gif.html
+++ b/gif.html
@@ -24,11 +24,16 @@
 <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/gif.js"></script>
-<script type="text/javascript" src="js/vendor/FileSaver.js"></script>
+<script type="text/javascript" src="js/vendor/FileSaver/FileSaver.js"></script>
 <script type="text/javascript" src="js/vendor/canvasquery.js"></script>
 <script type="text/javascript" src="js/canvasquery.dither.js"></script>
+<script type="text/javascript" src="js/util.js"></script>
 <script type="text/javascript">
 
+var algo = "random"
+var frames = []
+var lastGif;
+
 document.getElementById("url").onchange = load
 setTimeout(load)
 
@@ -37,39 +42,13 @@ function status (s){
   el.innerHTML = s + "..."
 }
 
-function load(imageURL) {
+function load () {
   document.getElementById("save").style.display = "none"
   status("loading")
-  var imageURL = proxify( document.getElementById("url").value );
-
-  if (imageURL.substr(-3) === "gif") {
-    window.gif = GIF(imageURL);
-    // gif.on("error", tryToLoadNextImage);
-    // gif.on("rendered", trackLoadTime);
-    gif.on("rendered", ready);
-    return gif.render();
-  } else {
-    window.img = new Image();
-    // img.addEventListener("error", tryToLoadNextImage);
-    img.addEventListener("load", ready);
-    img.crossOrigin = "anonymous";
-    return img.src = imageURL;
-  }
+  var imageURL = document.getElementById("url").value
+  loadImage(imageURL, ready)
 }
 
-function giveImage() {
-  if (imageURL.substr(-3) === "gif") {
-    return gif.frames[gif.currentFrame()].ctx.canvas;
-  } else {
-    return img;
-  }
-}
-
-function proxify (url) {
-  return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
-};
-
-
 function ready(){
   status("")
   var buttons = document.getElementsByTagName("button")
@@ -99,7 +78,6 @@ encoder.on("rendered-url", function(url){
   document.body.appendChild(image)
 })
 
-var lastGif;
 encoder.on("rendered", function(bits){
   status("")
   lastGif = bits
@@ -113,8 +91,7 @@ function save (){
   saveAs(blob, filename + "-" + algo + "-" + (+new Date() % 1000) + ".gif");
 }
 
-var algo = "random"
-var frames = []
+
 function build(){
   document.getElementById("save").style.display = "none"
   status("dithering")
diff --git a/js/util.js b/js/util.js
index 9dc306c..fc27166 100644
--- a/js/util.js
+++ b/js/util.js
@@ -1,3 +1,41 @@
 $.fn.int = function(){ return parseInt($(this).val(),10) }
 $.fn.float = function(){ return parseFloat($(this).val()) }
 function clamp(n,a,b){ return n<a?a:n<b?n:b }
+
+function loadImage(imageURL, callback) {
+  document.getElementById("save").style.display = "none"
+  document.getElementById("encode").style.display = "none"
+  status("loading")
+  var imageURL = proxify( imageURL );
+
+  window.gif = window.img = null
+
+  if (imageURL.substr(-3) === "gif") {
+    window.gif = GIF(imageURL);
+    // gif.on("error", tryToLoadNextImage);
+    // gif.on("rendered", trackLoadTime);
+    gif.on("rendered", callback);
+    return gif.render();
+  } else {
+    window.img = new Image();
+    // img.addEventListener("error", tryToLoadNextImage);
+    img.addEventListener("load", callback);
+    img.crossOrigin = "anonymous";
+    return img.src = imageURL;
+  }
+}
+
+function giveImage() {
+  if (imageURL.substr(-3) === "gif") {
+    return gif.frames[gif.currentFrame()].ctx.canvas;
+  } else {
+    return img;
+  }
+}
+
+function proxify (url) {
+  if (url.indexOf("http") == 0)
+    return "/cgi-bin/proxy?" + url // .replace(/^https?:\/\//, "");
+  else
+    return url
+};
diff --git a/js/vendor/gif-encode/client.js b/js/vendor/gif-encode/client.js
index a6c09ec..128c93d 100644
--- a/js/vendor/gif-encode/client.js
+++ b/js/vendor/gif-encode/client.js
@@ -99,7 +99,7 @@ function GifEncoder(){
     var ww = [];
 		base.init = function(){
 			for (var i = 0; i < WORKERS; i++) {
-				var worker = new Worker('gif-encode/worker.js');
+				var worker = new Worker('js/vendor/gif-encode/worker.js');
 				worker.onmessage = base.receiveWork;
 				ww.push(worker);
 			}