From 2f2e71c7d893286370328299c93d46473ae599c8 Mon Sep 17 00:00:00 2001 From: CBenni Date: Thu, 28 Dec 2017 13:19:33 +0000 Subject: [PATCH] Added browser-based gif decoder, encoder and renderer --- .gitignore | 2 + gifsupport/README.txt | 3 + gifsupport/gif.js | 3 + gifsupport/gif.worker.js | 3 + gifsupport/index.html | 20 +++ gifsupport/index.js | 315 +++++++++++++++++++++++++++++++++++++++ gifsupport/license.txt | 12 ++ 7 files changed, 358 insertions(+) create mode 100644 gifsupport/README.txt create mode 100644 gifsupport/gif.js create mode 100644 gifsupport/gif.worker.js create mode 100644 gifsupport/index.html create mode 100644 gifsupport/index.js create mode 100644 gifsupport/license.txt diff --git a/.gitignore b/.gitignore index f4e767e..f5df014 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ node_modules *.log run_forever ffmpeg.exe +gifsupport/js/ +gifsupport/*.map diff --git a/gifsupport/README.txt b/gifsupport/README.txt new file mode 100644 index 0000000..6aec385 --- /dev/null +++ b/gifsupport/README.txt @@ -0,0 +1,3 @@ +A Pen created at CodePen.io. You can find this one at https://codepen.io/CBenni/pen/YYZKeO. + + \ No newline at end of file diff --git a/gifsupport/gif.js b/gifsupport/gif.js new file mode 100644 index 0000000..2e4d204 --- /dev/null +++ b/gifsupport/gif.js @@ -0,0 +1,3 @@ +// gif.js 0.2.0 - https://github.com/jnordberg/gif.js +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.GIF=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o0&&this._events[type].length>m){this._events[type].warned=true;console.error("(node) warning: possible EventEmitter memory "+"leak detected. %d listeners added. "+"Use emitter.setMaxListeners() to increase limit.",this._events[type].length);if(typeof console.trace==="function"){console.trace()}}}return this};EventEmitter.prototype.on=EventEmitter.prototype.addListener;EventEmitter.prototype.once=function(type,listener){if(!isFunction(listener))throw TypeError("listener must be a function");var fired=false;function g(){this.removeListener(type,g);if(!fired){fired=true;listener.apply(this,arguments)}}g.listener=listener;this.on(type,g);return this};EventEmitter.prototype.removeListener=function(type,listener){var list,position,length,i;if(!isFunction(listener))throw TypeError("listener must be a function");if(!this._events||!this._events[type])return this;list=this._events[type];length=list.length;position=-1;if(list===listener||isFunction(list.listener)&&list.listener===listener){delete this._events[type];if(this._events.removeListener)this.emit("removeListener",type,listener)}else if(isObject(list)){for(i=length;i-- >0;){if(list[i]===listener||list[i].listener&&list[i].listener===listener){position=i;break}}if(position<0)return this;if(list.length===1){list.length=0;delete this._events[type]}else{list.splice(position,1)}if(this._events.removeListener)this.emit("removeListener",type,listener)}return this};EventEmitter.prototype.removeAllListeners=function(type){var key,listeners;if(!this._events)return this;if(!this._events.removeListener){if(arguments.length===0)this._events={};else if(this._events[type])delete this._events[type];return this}if(arguments.length===0){for(key in this._events){if(key==="removeListener")continue;this.removeAllListeners(key)}this.removeAllListeners("removeListener");this._events={};return this}listeners=this._events[type];if(isFunction(listeners)){this.removeListener(type,listeners)}else if(listeners){while(listeners.length)this.removeListener(type,listeners[listeners.length-1])}delete this._events[type];return this};EventEmitter.prototype.listeners=function(type){var ret;if(!this._events||!this._events[type])ret=[];else if(isFunction(this._events[type]))ret=[this._events[type]];else ret=this._events[type].slice();return ret};EventEmitter.prototype.listenerCount=function(type){if(this._events){var evlistener=this._events[type];if(isFunction(evlistener))return 1;else if(evlistener)return evlistener.length}return 0};EventEmitter.listenerCount=function(emitter,type){return emitter.listenerCount(type)};function isFunction(arg){return typeof arg==="function"}function isNumber(arg){return typeof arg==="number"}function isObject(arg){return typeof arg==="object"&&arg!==null}function isUndefined(arg){return arg===void 0}},{}],2:[function(require,module,exports){var UA,browser,mode,platform,ua;ua=navigator.userAgent.toLowerCase();platform=navigator.platform.toLowerCase();UA=ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/)||[null,"unknown",0];mode=UA[1]==="ie"&&document.documentMode;browser={name:UA[1]==="version"?UA[3]:UA[1],version:mode||parseFloat(UA[1]==="opera"&&UA[4]?UA[4]:UA[2]),platform:{name:ua.match(/ip(?:ad|od|hone)/)?"ios":(ua.match(/(?:webos|android)/)||platform.match(/mac|win|linux/)||["other"])[0]}};browser[browser.name]=true;browser[browser.name+parseInt(browser.version,10)]=true;browser.platform[browser.platform.name]=true;module.exports=browser},{}],3:[function(require,module,exports){var EventEmitter,GIF,browser,extend=function(child,parent){for(var key in parent){if(hasProp.call(parent,key))child[key]=parent[key]}function ctor(){this.constructor=child}ctor.prototype=parent.prototype;child.prototype=new ctor;child.__super__=parent.prototype;return child},hasProp={}.hasOwnProperty,indexOf=[].indexOf||function(item){for(var i=0,l=this.length;iref;i=0<=ref?++j:--j){results.push(null)}return results}.call(this);numWorkers=this.spawnWorkers();if(this.options.globalPalette===true){this.renderNextFrame()}else{for(i=j=0,ref=numWorkers;0<=ref?jref;i=0<=ref?++j:--j){this.renderNextFrame()}}this.emit("start");return this.emit("progress",0)};GIF.prototype.abort=function(){var worker;while(true){worker=this.activeWorkers.shift();if(worker==null){break}this.log("killing active worker");worker.terminate()}this.running=false;return this.emit("abort")};GIF.prototype.spawnWorkers=function(){var j,numWorkers,ref,results;numWorkers=Math.min(this.options.workers,this.frames.length);(function(){results=[];for(var j=ref=this.freeWorkers.length;ref<=numWorkers?jnumWorkers;ref<=numWorkers?j++:j--){results.push(j)}return results}).apply(this).forEach(function(_this){return function(i){var worker;_this.log("spawning worker "+i);worker=new Worker(_this.options.workerScript);worker.onmessage=function(event){_this.activeWorkers.splice(_this.activeWorkers.indexOf(worker),1);_this.freeWorkers.push(worker);return _this.frameFinished(event.data)};return _this.freeWorkers.push(worker)}}(this));return numWorkers};GIF.prototype.frameFinished=function(frame){var i,j,ref;this.log("frame "+frame.index+" finished - "+this.activeWorkers.length+" active");this.finishedFrames++;this.emit("progress",this.finishedFrames/this.frames.length);this.imageParts[frame.index]=frame;if(this.options.globalPalette===true){this.options.globalPalette=frame.globalPalette;this.log("global palette analyzed");if(this.frames.length>2){for(i=j=1,ref=this.freeWorkers.length;1<=ref?jref;i=1<=ref?++j:--j){this.renderNextFrame()}}}if(indexOf.call(this.imageParts,null)>=0){return this.renderNextFrame()}else{return this.finishRendering()}};GIF.prototype.finishRendering=function(){var data,frame,i,image,j,k,l,len,len1,len2,len3,offset,page,ref,ref1,ref2;len=0;ref=this.imageParts;for(j=0,len1=ref.length;j=this.frames.length){return}frame=this.frames[this.nextFrame++];worker=this.freeWorkers.shift();task=this.getTask(frame);this.log("starting frame "+(task.index+1)+" of "+this.frames.length);this.activeWorkers.push(worker);return worker.postMessage(task)};GIF.prototype.getContextData=function(ctx){return ctx.getImageData(0,0,this.options.width,this.options.height).data};GIF.prototype.getImageData=function(image){var ctx;if(this._canvas==null){this._canvas=document.createElement("canvas");this._canvas.width=this.options.width;this._canvas.height=this.options.height}ctx=this._canvas.getContext("2d");ctx.setFill=this.options.background;ctx.fillRect(0,0,this.options.width,this.options.height);ctx.drawImage(image,0,0);return this.getContextData(ctx)};GIF.prototype.getTask=function(frame){var index,task;index=this.frames.indexOf(frame);task={index:index,last:index===this.frames.length-1,delay:frame.delay,transparent:frame.transparent,width:this.options.width,height:this.options.height,quality:this.options.quality,dither:this.options.dither,globalPalette:this.options.globalPalette,repeat:this.options.repeat,canTransfer:browser.name==="chrome"};if(frame.data!=null){task.data=frame.data}else if(frame.context!=null){task.data=this.getContextData(frame.context)}else if(frame.image!=null){task.data=this.getImageData(frame.image)}else{throw new Error("Invalid frame")}return task};GIF.prototype.log=function(){var args;args=1<=arguments.length?slice.call(arguments,0):[];if(!this.options.debug){return}return console.log.apply(console,args)};return GIF}(EventEmitter);module.exports=GIF},{"./browser.coffee":2,events:1}]},{},[3])(3)}); +//# sourceMappingURL=gif.js.map diff --git a/gifsupport/gif.worker.js b/gifsupport/gif.worker.js new file mode 100644 index 0000000..269624e --- /dev/null +++ b/gifsupport/gif.worker.js @@ -0,0 +1,3 @@ +// gif.worker.js 0.2.0 - https://github.com/jnordberg/gif.js +(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o=ByteArray.pageSize)this.newPage();this.pages[this.page][this.cursor++]=val};ByteArray.prototype.writeUTFBytes=function(string){for(var l=string.length,i=0;i=0)this.dispose=disposalCode};GIFEncoder.prototype.setRepeat=function(repeat){this.repeat=repeat};GIFEncoder.prototype.setTransparent=function(color){this.transparent=color};GIFEncoder.prototype.addFrame=function(imageData){this.image=imageData;this.colorTab=this.globalPalette&&this.globalPalette.slice?this.globalPalette:null;this.getImagePixels();this.analyzePixels();if(this.globalPalette===true)this.globalPalette=this.colorTab;if(this.firstFrame){this.writeLSD();this.writePalette();if(this.repeat>=0){this.writeNetscapeExt()}}this.writeGraphicCtrlExt();this.writeImageDesc();if(!this.firstFrame&&!this.globalPalette)this.writePalette();this.writePixels();this.firstFrame=false};GIFEncoder.prototype.finish=function(){this.out.writeByte(59)};GIFEncoder.prototype.setQuality=function(quality){if(quality<1)quality=1;this.sample=quality};GIFEncoder.prototype.setDither=function(dither){if(dither===true)dither="FloydSteinberg";this.dither=dither};GIFEncoder.prototype.setGlobalPalette=function(palette){this.globalPalette=palette};GIFEncoder.prototype.getGlobalPalette=function(){return this.globalPalette&&this.globalPalette.slice&&this.globalPalette.slice(0)||this.globalPalette};GIFEncoder.prototype.writeHeader=function(){this.out.writeUTFBytes("GIF89a")};GIFEncoder.prototype.analyzePixels=function(){if(!this.colorTab){this.neuQuant=new NeuQuant(this.pixels,this.sample);this.neuQuant.buildColormap();this.colorTab=this.neuQuant.getColormap()}if(this.dither){this.ditherPixels(this.dither.replace("-serpentine",""),this.dither.match(/-serpentine/)!==null)}else{this.indexPixels()}this.pixels=null;this.colorDepth=8;this.palSize=7;if(this.transparent!==null){this.transIndex=this.findClosest(this.transparent,true)}};GIFEncoder.prototype.indexPixels=function(imgq){var nPix=this.pixels.length/3;this.indexedPixels=new Uint8Array(nPix);var k=0;for(var j=0;j=0&&x1+x=0&&y1+y>16,(c&65280)>>8,c&255,used)};GIFEncoder.prototype.findClosestRGB=function(r,g,b,used){if(this.colorTab===null)return-1;if(this.neuQuant&&!used){return this.neuQuant.lookupRGB(r,g,b)}var c=b|g<<8|r<<16;var minpos=0;var dmin=256*256*256;var len=this.colorTab.length;for(var i=0,index=0;i=0){disp=dispose&7}disp<<=2;this.out.writeByte(0|disp|0|transp);this.writeShort(this.delay);this.out.writeByte(this.transIndex);this.out.writeByte(0)};GIFEncoder.prototype.writeImageDesc=function(){this.out.writeByte(44);this.writeShort(0);this.writeShort(0);this.writeShort(this.width);this.writeShort(this.height);if(this.firstFrame||this.globalPalette){this.out.writeByte(0)}else{this.out.writeByte(128|0|0|0|this.palSize)}};GIFEncoder.prototype.writeLSD=function(){this.writeShort(this.width);this.writeShort(this.height);this.out.writeByte(128|112|0|this.palSize);this.out.writeByte(0);this.out.writeByte(0)};GIFEncoder.prototype.writeNetscapeExt=function(){this.out.writeByte(33);this.out.writeByte(255);this.out.writeByte(11);this.out.writeUTFBytes("NETSCAPE2.0");this.out.writeByte(3);this.out.writeByte(1);this.writeShort(this.repeat);this.out.writeByte(0)};GIFEncoder.prototype.writePalette=function(){this.out.writeBytes(this.colorTab);var n=3*256-this.colorTab.length;for(var i=0;i>8&255)};GIFEncoder.prototype.writePixels=function(){var enc=new LZWEncoder(this.width,this.height,this.indexedPixels,this.colorDepth);enc.encode(this.out)};GIFEncoder.prototype.stream=function(){return this.out};module.exports=GIFEncoder},{"./LZWEncoder.js":2,"./TypedNeuQuant.js":3}],2:[function(require,module,exports){var EOF=-1;var BITS=12;var HSIZE=5003;var masks=[0,1,3,7,15,31,63,127,255,511,1023,2047,4095,8191,16383,32767,65535];function LZWEncoder(width,height,pixels,colorDepth){var initCodeSize=Math.max(2,colorDepth);var accum=new Uint8Array(256);var htab=new Int32Array(HSIZE);var codetab=new Int32Array(HSIZE);var cur_accum,cur_bits=0;var a_count;var free_ent=0;var maxcode;var clear_flg=false;var g_init_bits,ClearCode,EOFCode;function char_out(c,outs){accum[a_count++]=c;if(a_count>=254)flush_char(outs)}function cl_block(outs){cl_hash(HSIZE);free_ent=ClearCode+2;clear_flg=true;output(ClearCode,outs)}function cl_hash(hsize){for(var i=0;i=0){disp=hsize_reg-i;if(i===0)disp=1;do{if((i-=disp)<0)i+=hsize_reg;if(htab[i]===fcode){ent=codetab[i];continue outer_loop}}while(htab[i]>=0)}output(ent,outs);ent=c;if(free_ent<1<0){outs.writeByte(a_count);outs.writeBytes(accum,0,a_count);a_count=0}}function MAXCODE(n_bits){return(1<0)cur_accum|=code<=8){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}if(free_ent>maxcode||clear_flg){if(clear_flg){maxcode=MAXCODE(n_bits=g_init_bits);clear_flg=false}else{++n_bits;if(n_bits==BITS)maxcode=1<0){char_out(cur_accum&255,outs);cur_accum>>=8;cur_bits-=8}flush_char(outs)}}this.encode=encode}module.exports=LZWEncoder},{}],3:[function(require,module,exports){var ncycles=100;var netsize=256;var maxnetpos=netsize-1;var netbiasshift=4;var intbiasshift=16;var intbias=1<>betashift;var betagamma=intbias<>3;var radiusbiasshift=6;var radiusbias=1<>3);var i,v;for(i=0;i>=netbiasshift;network[i][1]>>=netbiasshift;network[i][2]>>=netbiasshift;network[i][3]=i}}function altersingle(alpha,i,b,g,r){network[i][0]-=alpha*(network[i][0]-b)/initalpha;network[i][1]-=alpha*(network[i][1]-g)/initalpha;network[i][2]-=alpha*(network[i][2]-r)/initalpha}function alterneigh(radius,i,b,g,r){var lo=Math.abs(i-radius);var hi=Math.min(i+radius,netsize);var j=i+1;var k=i-1;var m=1;var p,a;while(jlo){a=radpower[m++];if(jlo){p=network[k--];p[0]-=a*(p[0]-b)/alpharadbias;p[1]-=a*(p[1]-g)/alpharadbias;p[2]-=a*(p[2]-r)/alpharadbias}}}function contest(b,g,r){var bestd=~(1<<31);var bestbiasd=bestd;var bestpos=-1;var bestbiaspos=bestpos;var i,n,dist,biasdist,betafreq;for(i=0;i>intbiasshift-netbiasshift);if(biasdist>betashift;freq[i]-=betafreq;bias[i]+=betafreq<>1;for(j=previouscol+1;j>1;for(j=previouscol+1;j<256;j++)netindex[j]=maxnetpos}function inxsearch(b,g,r){var a,p,dist;var bestd=1e3;var best=-1;var i=netindex[g];var j=i-1;while(i=0){if(i=bestd)i=netsize;else{i++;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist=0){p=network[j];dist=g-p[1];if(dist>=bestd)j=-1;else{j--;if(dist<0)dist=-dist;a=p[0]-b;if(a<0)a=-a;dist+=a;if(dist>radiusbiasshift;if(rad<=1)rad=0;for(i=0;i=lengthcount)pix-=lengthcount;i++;if(delta===0)delta=1;if(i%delta===0){alpha-=alpha/alphadec;radius-=radius/radiusdec;rad=radius>>radiusbiasshift;if(rad<=1)rad=0;for(j=0;j + + + + + A Pen by CBenni + + + + + + + + + + + + + + diff --git a/gifsupport/index.js b/gifsupport/index.js new file mode 100644 index 0000000..6029623 --- /dev/null +++ b/gifsupport/index.js @@ -0,0 +1,315 @@ +function loadFromUrl(url) { + return new Promise(function (resolve, reject) { + var xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.responseType = "arraybuffer"; + xhr.onload = function () { + if (this.status >= 200 && this.status < 300) { + resolve({ + type: xhr.getResponseHeader("Content-Type"), + data: xhr.response + }); + } else { + reject({ + status: this.status, + statusText: xhr.statusText + }); + } + }; + xhr.onerror = function () { + reject({ + status: this.status, + statusText: xhr.statusText + }); + }; + xhr.send(); + }); +} + +function _arrayBufferToBase64( buffer ) { + var binary = ''; + var bytes = new Uint8Array( buffer ); + var len = bytes.byteLength; + for (var i = 0; i < len; i++) { + binary += String.fromCharCode( bytes[ i ] ); + } + return window.btoa( binary ); +} + +function createCanvas(width, height) { + const canvas = document.createElement('canvas'); + canvas.width = width; + canvas.height = height; + return canvas; +} + +class ImageEx { + constructor(url) { + this.url = url; + this.loaded = loadFromUrl(url).then(result => { + this.type = result.type; + this.data = result.data; + if(this.type === "image/gif") { + return this.initGif(); + } else { + return this.initStatic(); + } + }) + } + + + initGif() { + const reader = new GifReader(new Uint8Array(this.data)); + this.width = reader.width; + this.height = reader.height; + this.frames = this.decodeFrames(reader); + + this.renderAllFrames(); + } + + initStatic(){ + // todo: in node, we wanna use this.data + const img = new Image(); + var arrayBufferView = new Uint8Array( this.data ); + var blob = new Blob( [ arrayBufferView ], { type: this.type } ); + var urlCreator = window.URL || window.webkitURL; + var imageUrl = urlCreator.createObjectURL( blob ); + img.src = imageUrl; + return new Promise(resolve => { + img.onload = () => { + this.width = img.width; + this.height = img.height; + this.frames = [{ + actualOffset: 0, + actualDelay: Infinity, + delay: Infinity + }] + this.spriteSheet = createCanvas(this.width, this.height); + const spriteSheetCtx = this.spriteSheet.getContext("2d"); + spriteSheetCtx.drawImage(img, 0, 0); + resolve(); + } + }) + } + + decodeFrames(reader) { + const frames = []; + let offset = 0; + for(let i=0;i { + return ctx.clearRect(0,0,canvas.width,canvas.height); + } + break; + case 3: + saved = ctx.getImageData(0,0,canvas.width,canvas.height); + disposeFrame = () => { + return ctx.putImageData(saved, 0, 0); + } + break; + default: + this.disposeFrame = null; + } + + // draw current frame + ctx.drawImage(frame.buffer, frame.x, frame.y); + // draw the frame onto the sprite sheet + spriteSheetCtx.drawImage(canvas, this.width * i, 0); + } + } + + createBufferCanvas(frame, width, height) { + const canvas = createCanvas(frame.width,frame.height); + const ctx = canvas.getContext("2d"); + + const imageData = ctx.createImageData(width, height); + imageData.data.set(frame.pixels); + + ctx.putImageData(imageData, - frame.x, -frame.y); + return canvas; + } + + drawFrame(ctx, frameNum, x, y, args = {}) { + console.log("this", this) + const sx = frameNum * this.width + (args.sx || 0); + const sy = args.sy || 0; + const swidth = Math.min(args.swidth || this.width, this.width) - (args.sx || 0); + const sheight = args.sheight || this.height; + + console.log(`Drawing frame ${frameNum} at`) + console.log("sx",sx) + console.log("sy",sy) + console.log("sw",swidth) + console.log("sh",sheight) + console.log("x",x) + console.log("y",y) + console.log("w",args.width) + console.log("h",args.height) + + ctx.drawImage(this.spriteSheet, sx, sy, swidth, sheight, x, y, args.width || swidth, args.height || sheight); + //ctx.drawImage(this.spriteSheet, 0, 0, 112, 112, 0, 0, 112, 112) + } + +} +class CanvasEx { + constructor(width, height) { + this.width = width; + this.height = height; + this.frames = []; + this.totalDuration = Infinity; + } + + addFrame(actualDelay, delay) { + if((actualDelay === undefined || actualDelay === null) + && (delay === undefined || delay === null)) throw new Error("Delay has to be set!"); + const canvas = createCanvas(this.width, this.height); + const frame = { + actualOffset: this.totalDuration, + delay: delay ? delay : Math.max(Math.round(actualDelay/10), 2), + actualDelay: actualDelay ? actualDelay : Math.max(delay * 10, 20), + canvas, + ctx: canvas.getContext("2d") + } + this.totalDuration += delay; + this.frames.push(frame); + } + + drawImage(img,x,y,args = {}) { + let {sx,sy,swidth,sheight,width,height,beginAt = 0,endAt = Infinity} = args; + console.log("Drawing image ",img) + console.log("At ",x,y,args) + beginAt = Math.max(0, beginAt); + endAt = Math.min(Math.max(img.totalDuration || 0, this.totalDuration), endAt); + if(img.frames && img.frames.length > 1) { + if(this.frames.length > 1) throw new Error("Cannot render animations onto animated canvases!"); + this.totalDuration = img.totalDuration; + // we are drawing an animated image onto a static one. + // for each frame in the image, create a frame on this one, cloning the original picture (if any), + // render the original on each frame, and draw the frame on top. + for(let i=this.frames.length;i 0) { + this.frames[i].ctx.drawImage(this.frames[0].canvas, 0, 0); + } + } + for(let i=0;i{ + _cnv.drawImage(img, 0, 0); + //img.drawFrame(_ctx, 0, 0, 0) + return img2.loaded +}).then(()=>{ + _cnv.drawImage(img2, 0, 0, {width: 128, height: 128}); +}).then(()=>{ + console.log("Drawing CanvasEx to screen", _cnv) + _cnv.drawFrame(_ctx, 0, 0, 0); + + console.log("Starting gif render") + const GifEncoder = new GIF({ + workers: 2, + quality: 10, + transparent: 'rgba(0,0,0,0)' + }); + + for(let i=0;i<_cnv.frames.length;++i) { + const frame = _cnv.frames[i]; + console.log("Rendering frame "+i) + GifEncoder.addFrame(frame.canvas, {delay: frame.delay}) + } + + GifEncoder.on('finished', function(blob) { + console.log("Done rendering!", URL.createObjectURL(blob)) + document.getElementById("i").src = URL.createObjectURL(blob); + }); + + GifEncoder.render(); +}) + +var curFrm = 0; +setInterval(()=>{ + _ctx.clearRect(0,0,200,200); + _cnv.drawFrame(_ctx, curFrm++ % _cnv.frames.length, 0, 0); +}, 100) + + + +/*img2.loaded.then(() => { + _ctx.drawImage(img2.spriteSheet, 0, 100) +}) + +img.loaded.then(()=>_ctx.drawImage(img.spriteSheet,0,0))*/ \ No newline at end of file diff --git a/gifsupport/license.txt b/gifsupport/license.txt new file mode 100644 index 0000000..be92a99 --- /dev/null +++ b/gifsupport/license.txt @@ -0,0 +1,12 @@ + + +