summaryrefslogtreecommitdiff
path: root/gif-dither.html
diff options
context:
space:
mode:
Diffstat (limited to 'gif-dither.html')
-rw-r--r--gif-dither.html63
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)