dither stuff

author: Julie Lala <jules@okfoc.us> 2013-12-10 00:47:36 -0500
committer: Julie Lala <jules@okfoc.us> 2013-12-10 00:47:36 -0500
commit: 037a0ae8072217f7821549bbdfe030e73289330d (patch)
tree: b2e20cff097a44e08cd8e6609e7d5a00b732d88c /gif-dither.html
1 files changed, 195 insertions, 0 deletions
diff --git a/gif-dither.html b/gif-dither.html
new file mode 100644
index 0000000..3421588
--- /dev/null
+++ b/gif-dither.html
@@ -0,0 +1,195 @@
+<!doctype html>
+<html>
+<head>
+<title>Gif Dither</title>
+</head>
+<body>
+<div>
+<!-- <button id="random">random</button> -->
+<button id="pattern2Lite">pattern2lite</button>
+<button id="pattern3Lite">pattern3lite</button>
+<button id="pattern4Lite">pattern4lite</button>
+<button id="floydSteinberg">floyd-steinberg</button>
+<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">
+<button id="encode">ENCODE</button>
+<button id="save">SAVE</button>
+<span id="loading"></span>
+</div>
+<div id="images"></div>
+</body>
+<script type="text/javascript" src="gif-encode/util.js"></script>
+<script type="text/javascript" src="gif-encode/tube.js"></script>
+<script type="text/javascript" src="gif-encode/client.js"></script>
+<script type="text/javascript" src="gif.js"></script>
+<script type="text/javascript" src="FileSaver.js"></script>
+<script type="text/javascript" src="dataUriToBlob.js"></script>
+<script type="text/javascript" src="canvasquery.js"></script>
+<script type="text/javascript" src="canvasquery.dither.js"></script>
+<script type="text/javascript">
+
+document.getElementById("url").onchange = load
+setTimeout(init)
+
+function init () {
+  bind()
+//  load()
+}
+
+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++) {
+    (function(n){
+      buttons[n].onclick = function(){
+        algo = buttons[n].id;
+        build()
+      }
+    })(i)
+  }
+  document.getElementById("save").onclick = save
+  document.getElementById("encode").onclick = encode
+}
+
+var encoder = new GifEncoder()
+
+encoder.on("quantized", function(url){
+  status("encoding")
+  encoder.encode()
+})
+
+encoder.on("rendered-url", function(url){
+  status("")
+  var image = new Image ()
+  image.src = url
+  document.body.appendChild(image)
+  lastGif = 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;
+  var filename = document.getElementById("url").value.replace(/^.*\//,"").replace(/\.gif.*$/,"")
+  var blob = dataUriToBlob(lastGif); // new Blob ([lastGif], {type: "image/gif"});
+  saveAs(blob, filename + "-" + algo + "-" + (+new Date() % 1000) + ".gif");
+}
+
+function ready(){
+  if (window.gif) gif.off("rendered", ready)
+  status("")
+  document.getElementById("save").style.display = "none"
+  document.getElementById("encode").style.display = "inline"
+  build()
+}
+
+var algo = "random"
+var frames = []
+function build(){
+  status("dithering")
+  encoder.resetFrames()
+
+  document.getElementById("images").innerHTML = ""
+  if (window.gif) {
+    var buttons = document.getElementsByTagName("button")
+    var bz = []
+    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)
+      encoder.addFrame(cc.canvas)
+    })
+  }
+  else {
+    var frame = { ctx: { canvas: window.img } };
+    var buttons = document.getElementsByTagName("button")
+    for (var i = 0; i < buttons.length; i++) {
+      if (buttons[i].id != "save" && buttons[i].id != "encode") {
+        algo = buttons[i].id;
+        var cc = dither(frame)
+        encoder.addFrame(cc.canvas)
+      }
+    }
+  }
+  encode()
+}
+
+function encode(){
+  if (! encoder.quantized) {
+    status("quantizing")
+    encoder.quantize()
+  }
+  else {
+    status("encoding")
+    encoder.encode()
+  }
+}
+function dither(frame){
+  var canvas = frame.ctx.canvas
+  var w = canvas.width, h = canvas.height;
+  var cc = cq(w, h)
+  cc.drawImage(canvas, 0, 0, w, h);
+  cc[algo + "Dither"]( )
+  return cc
+  // cc.appendTo("#images")
+}
+
+</script>
+</html>
+
author	Julie Lala <jules@okfoc.us>	2013-12-10 00:47:36 -0500
committer	Julie Lala <jules@okfoc.us>	2013-12-10 00:47:36 -0500
commit	037a0ae8072217f7821549bbdfe030e73289330d (patch)
tree	b2e20cff097a44e08cd8e6609e7d5a00b732d88c /gif-dither.html