diff options
Diffstat (limited to 'gif-dither.html')
| -rw-r--r-- | gif-dither.html | 63 |
1 files changed, 12 insertions, 51 deletions
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) |
