diff options
| author | jules <jules@okfoc.us> | 2013-12-13 15:28:31 -0500 |
|---|---|---|
| committer | jules <jules@okfoc.us> | 2013-12-13 15:28:31 -0500 |
| commit | 346f3a9817b1e0812565396b9811a1ce5adc97b8 (patch) | |
| tree | 47944eb9a2762ef2036d140430a69be5afa9f368 /gif-encode/client.js | |
| parent | 96fd8423cc0793d47cab9117b0167fe19041cdea (diff) | |
reorganize
Diffstat (limited to 'gif-encode/client.js')
| -rw-r--r-- | gif-encode/client.js | 260 |
1 files changed, 0 insertions, 260 deletions
diff --git a/gif-encode/client.js b/gif-encode/client.js deleted file mode 100644 index a6c09ec..0000000 --- a/gif-encode/client.js +++ /dev/null @@ -1,260 +0,0 @@ -// Total frames to record -var FRAMES_PER_GIF = 36; - -// Frames per second to read from the video -var FPS = 12; - -// Per-frame delay in milliseconds -var DELAY = Math.floor( 1000 / FPS ); - -// Number of WebWorkers to create -var WORKERS = 4; - -// Number of frames to use to build the gif palette (takes longest) -var FRAMES_TO_QUANTIZE = 4; - -// Upload these gifs when finished?? -var DO_UPLOAD = true; - -function GifEncoder(){ - var base = this; - this.working = false; - var canvases = []; - var contexts = []; - var frames = []; - var delays = []; - - var initted = Date.now(); - var started = Date.now(); - var tube = base.tube = new Tube () - - var workers = new Factory (); - - var width, height; - var neuquant, colortab; - - workers.hire("message", receiveMessage); - workers.hire("quantize", receiveQuantize); - workers.hire("encode", receiveEncode); - - var reset = this.reset = function(){ - canvases = []; - contexts = []; - frames = []; - delays = []; - width = 0; - height = 0; - neuquant = null; - colortab = null; - base.quantized = false - } - var resetFrames = this.resetFrames = function(){ - canvases = []; - contexts = []; - frames = []; - delays = []; - width = 0; - height = 0; - } - - this.on = function(){ - base.tube.on.apply(base.tube, arguments) - }; - - this.off = function(){ - base.tube.off.apply(base.tube, arguments) - }; - - var addFrame = this.addFrame = function(canvas, delay) { - var ctx = canvas.getContext('2d'); - canvases.push(canvas); - contexts.push(ctx); - delays.push(delay); - - if (canvases.length == 1) { - width = canvas.width; - height = canvas.height; - } - } - - var copyFrame = this.copyFrame = function(canvas, delay) { - var newCanvas = document.createElement("canvas"); - var ctx = newCanvas.getContext('2d'); - - ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height); - - canvases.push(newCanvas); - contexts.push(ctx); - delays.push(delay); - - if (canvases.length == 1) { - width = canvas.width; - height = canvas.height; - } - } - - function Factory () { - var base = this; - var w = 0; // which worker to work next - var ww = []; - base.init = function(){ - for (var i = 0; i < WORKERS; i++) { - var worker = new Worker('gif-encode/worker.js'); - worker.onmessage = base.receiveWork; - ww.push(worker); - } - } - var tasks = {}; - base.hire = function(task, cb){ - tasks[task] = cb; - } - base.work = function(job){ - ww[++w % ww.length].postMessage(job); - } - base.receiveWork = function(e){ - e.data.task in tasks && tasks[e.data.task](e); - } - base.init(); - } - - function receiveMessage(e){ - console.log("[WORKER]", e.data.message); - } - - var neuquant, colortab; - var quantize = this.quantize = function () { - initted = Date.now(); - started = Date.now(); - var spritedata = spriteSheet(FRAMES_TO_QUANTIZE); - - workers.work({ - task: 'quantize', - imageData: spritedata - }); - } - - function receiveQuantize(e) { - console.log(Date.now() - started, "quantization done"); - neuquant = e.data.neuquant; - colortab = e.data.colortab; - base.quantized = true - base.tube("quantized") - } - - var encode = this.encode = function (nq, ct) { - nq = nq || neuquant - ct = ct || colortab - - started = Date.now(); - - console.log('working .... '); - var i = 0; - - function sendWork () { - if (i == canvases.length) return doneSending(); - - var ctx = contexts[i]; - var imdata = ctx.getImageData(0, 0, width, height).data; - var delay = delays[i]; - - workers.work({ - task: 'encode', - frame_index: i, - frame_length: contexts.length-1, - height: height, - width: width, - delay: delay, - imageData: imdata, - neuquant: neuquant, - colortab: colortab - }); - - i++; - setTimeout(sendWork, 16); - } - function doneSending(){ - base.tube("doneSending") - // ui.doneEncodingPicture(); - } - sendWork(); - } - - function receiveEncode(e){ - var frame_index = e.data["frame_index"]; - var frame_data = e.data["frame_data"]; - - frames[frame_index] = frame_data; - for (var j = 0; j < canvases.length; j++) { - if (frames[j] == null) { - return; - } - } - console.log("FINISHED " + canvases.length); - var binary_gif = frames.join(''); - var base64_gif = window.btoa(binary_gif); - var data_url = 'data:image/gif;base64,'+base64_gif; - - base.working = false; - - // photo.setAttribute('src', data_url); - // ui.doneEncodingPicture(); - base.tube("rendered", binary_gif) - base.tube("rendered-url", data_url) -// if (DO_UPLOAD) upload( base64_gif ); - - console.log((Date.now() - started), "processed frames"); - console.log((Date.now() - initted), "done"); - } - -// function upload (base64_gif) { -// $("#working").html("UPLOADING") -// -// console.log("starting upload") -// var params = { -// url: base64_gif -// } -// $.ajax({ -// 'url': "/photos.json", -// 'type': 'post', -// 'data': csrf(params), -// 'success': function(data){ -// -// // $("#share").data("href", "/photos/" + data.hash) -// // $("#share, #make-another").fadeIn(400); -// console.log(data); -// console.log((Date.now() - started), "uploaded"); -// // $("#photo").attr("src", data.url); -// // window.location.href = "/photos/" + data.hash -// localStorage.setItem('hash', data.hash) -// window.location.href = "/" -// // data.hash -// } -// }); -// console.log("ok"); -// } - - function spriteSheet (frameCount) { - var start = Date.now(); - frameCount = Math.min(contexts.length, frameCount); - var sprites = document.createElement("canvas"); - var spriteContext = sprites.getContext('2d'); - sprites.width = width; - sprites.height = height * frameCount; - var spritedata = spriteContext.getImageData(0, 0, sprites.width, sprites.height) - var spritedatadata = spritedata.data - var j = 0; - var ctxz = sample(contexts, 4); - while (frameCount--) { - var ctx = ctxz[frameCount]; - var imdata = ctx.getImageData(0, 0, width, height).data; - for (var n = 0; n < imdata.length; j++, n++) { - spritedatadata[j] = imdata[n]; - } - } - // spriteContext.putImageData(spritedata, 0, 0, 0, 0, sprites.width, sprites.height); - // upload( sprites.toDataURL("image/png").split(",")[1] - console.log(Date.now() - start, "built spritesheet"); - return spritedata; - } - -} |
