2d:null 2e:["$","title",null,{"children":"GIF Converter (canvas & SVG) | Fabian Iwand | Observable"}] 33:T655,{ // Await button press. example_start_render2; // This draw callback always returns the same element, allowing us to reuse it // in the preview option. const drawFrame = example_createAnimation(); return renderGif( // Invalidation promise. Required. invalidation, // Render callback. Required. drawFrame, // Duration in milliseconds. Required. example_duration, // Additional options. None of these are required. { // Frames per seconds, defaults to 30. fps: 40, // Preview element, placeholder that gets displayed during rendering. // Tip: Pass in an updating canvas or SVG element to get a "live" preview. preview: drawFrame(0), // Defaults to `observable-${timestamp}`; filename: `example-gif-${+Date.now()}`, // Update interval during rendering. Defaults to 500. // Set to a lower value if your browser freezes. interval: 200, // Pause in milliseconds to add to the end of the gif. Defaults to 0. pause: 0, // Low-level options which get passed into GifConverter and gif.js. // While these are gif.js options, it is recommended to only pass in // the options listed below. converterOptions: { // Number of workers. GifConverter defaults this to the max. supported hardware concurrency. workers: 1, // Palette sampling interval in pixels. Defaults to 10. // Lower is better, but also slower. quality: 15, // Palette dithering, defaults to false (no dithering). dither: 'FalseFloydSteinberg', } } ); }34:Tf7e,class Composer { constructor(invalidation) { this.MIN_DELAY = 15; // Frame delay. this._delay = NaN; this.fps(30); // Invalidation promise. this._invalidation = invalidation; // Frame promises. this._frames = []; // Unprocessed sequence frames. this._queue = new Set; } // Captures a frame from HTMLImageElement or HTMLCanvasElement. async _createFrame(canvas, options) { return {...options, data: await getImageData(canvas)}; } // Returns or sets the current frame delay in milliseconds. delay(v) { if(!arguments.length) return this._delay; if(v < this.MIN_DELAY) throw Error(`Delay cannot not be lower than ${this.MIN_DELAY}`); if(!isFinite(v)) throw Error('Delay must be finite'); return this._delay = +v, this; } // Returns or sets the current frame delay in frames per second. fps(v) { if(!arguments.length) return 1000 / this.delay(); return this.delay(1000 / v); } /** * Captures a single frame. * * TODO @param {HTMLCanvasElement} canvas * @param {number} [delay] * @param {object} [options] * @return {this} */ frame(canvas, delay = null, options = {}) { if(Symbol.iterator in Object(canvas)) { for(const c of canvas) this.frame(c, delay, options); } else { const f = this._createFrame(canvas, {...options, delay: delay || this._delay}); this._frames.push(Promise.resolve(f)); } return this; } /** * Queues a sequence of frames. * * @param {function(t): HTMLImageElement|HTMLCanvasElement} fn - Per-frame callback, receives * sequence offset and must return a canvas element. * @param {number} duration - Sequence duration in milliseconds. * @param {object} [options] - Additional options for GIF.addFrame. * @return {this} */ sequence(fn, duration, options = {}) { if(isNaN(duration) || !isFinite(duration) || duration <= 0) throw Error('Invalid duration'); const opts = {...options, delay: this._delay, copy: true}; const process = (t, resolve) => resolve(this._createFrame(fn(t), opts)); const steps = Math.round(duration / this._delay); for(let i = 0; i < steps; i++) { this._frames.push((new Promise((resolve, reject) => { this._queue.add(process.bind(this, i/steps, resolve)); if(this._invalidation) this._invalidation.then(reject); })).catch(()=>{})); } return this; } /** * Overrides the duration of a frame. * * @param {number} duration - Pause duration in milliseconds. * @param {number} [index] - Frame index. Defaults to the last frame. * @return {this} */ pause(duration, index = -1) { if(isNaN(duration) || !isFinite(duration) || duration <= 0) throw Error('Invalid duration'); if(!this._frames.length) throw Error('Pausing requires at least one frame'); const i = index < 0 ? this._frames.length + index : index; if(!this._frames[i]) throw Error('Invalid frame index'); this._frames[i] = this._frames[i].then(f => (f.delay = +duration, f)); return this; } /** * Processes queued frames. * * @param {int} [count] * @return {object} - progress information. * @property {number} total - Overall frame count. * @property {number} processed - Number of processed frames. * @property {number} progress - Percentage of processed frames (0..1). */ process(count = Infinity) { let i = count; while(i-- > 0 && this._queue.size) { const [fn] = this._queue; fn(); this._queue.delete(fn); } return { total: this._frames.length, processed: this._frames.length - this._queue.size, progress: 1 - this._queue.size / this._frames.length } } clear() { this._frames.length = 0; this._queue.clear(); } async getFrames() { // Process any remaining items in the queue. this.process(); return Promise.all(this._frames); } }35:Te3c,class GifDisplay { constructor(invalidation, options = {}) { this._invalidation = invalidation; this._$preview = options.preview; this._$image = html``; this._$status = html``; this._$progress = html``; this._$info = html`

`; this._$download = html`Download image`; this._$view = html`

${this._$status} ${this._$progress} ${this._$info} ${this._$download} `; this._hideProgress(); this._hideDownload(); if(this._$preview) this._$image.appendChild(this._$preview); } *process(composer, interval) { let t = 0, s = composer.process(0); if(s.progress >= 1) return yield this._$view; this._setProgress(s.progress, 'Rendering ...'); while(s.progress < 1) { s = composer.process(1); if(performance.now() - t >= interval) { t = performance.now(); this._setProgress(s.progress); yield this._$view; } } this._hideProgress(); return yield this._$view; } *convert(composer, converter, filename) { this._setProgress(0, 'Converting ...'); let state; yield composer.getFrames().then(frames => { state = converter.convert(frames); return this._$view; }); while(state.progress < 1) { this._setProgress(state.progress); yield this._$view; } return yield state.promise.then(data => { const url = URL.createObjectURL(data.blob); if(this._invalidation) { this._invalidation.then(() => URL.revokeObjectURL(url)); } const $gif = html``; const $p = this._$preview, $i = this._$image; if($p) { for(const [k, v] of Object.entries($p.style)) { $gif.style.setProperty(k, v); } if($p.parentElement === $i) $i.removeChild($p); $i.appendChild($gif); } this._hideProgress(); this._setInfo(data); this._setDownload(url, filename); return this._$view; }); } _setDownload(objectUrl, filename = null) { const $l = this._$download; const defaultName = `observable-${Date.now()/1000|0}`; const name = (filename == null || filename == '' ? defaultName : filename) + '.gif'; $l.download = name; $l.title = name; $l.href = objectUrl; $l.style.display = 'block'; } _hideDownload() { this._$download.style.display = 'none'; } _setInfo(data) { const round = (n,p) => n.toFixed(p).replace(/\.0+$/, ''); const {duration, frames, blob} = data; const fpsMin = round(data.fpsMin, 1); const fpsMax = round(data.fpsMax, 1); const tFps = fpsMin === fpsMax ? fpsMin : `${fpsMin}-${fpsMax}`; const tSize = round(blob.size / (2<<19), 1); const tDuration = round(duration / 1000, 1); const $i = this._$info; while($i.lastChild) $i.removeChild($i.lastChild); $i.appendChild(html` ${tSize} MB
${tDuration}s at ${tFps} frames/s `); } _setProgress(progress, statusText = null) { const $s = this._$status, $p = this._$progress; $p.value = progress; $p.hidden = null; if(statusText != null) { $s.hidden = null; $s.textContent = statusText; } } _hideProgress() { const $s = this._$status, $p = this._$progress; $s.hidden = true; $s.textContent = ''; $p.hidden = true; $p.value = null; } }36:T68b,class GifConverter { /** * @param {Promise} [invalidation] - Observable invalidation promise. * @param {object} defaults - gif.js options */ constructor(invalidation, defaults = {}) { this._defaults = {workers: navigator.hardwareConcurrency, ...defaults}; this._invalidation = Promise.race([invalidation, new Promise(res=>{ this._cancel = res; })]); } /** * */ convert(frames, options = {}) { const state = { promise: null, total: frames.length, progress: 0, processed: 0, }; state.promise = new Promise((resolve, reject) => { const gif = new GIF({...this._defaults, ...options, workerScript}); gif.options.width = frames[0].data.width; gif.options.height = frames[0].data.height; gif.frames = frames.map(f => ({...f, transparent: null, data: f.data.data})); this._invalidation.then(() => this._terminate(gif)); gif.on('progress', v => { state.processed = Math.floor((state.progress = v) * state.total); }); gif.on('finished', blob => { this._terminate(gif); resolve({...this._getStats(frames), blob}); }); gif.render(); }); return state; } cancel() { this._cancel(); } _getStats(frames) { const delays = frames.map(f => f.delay); const duration = delays.reduce((s,d) => s+d, 0); return { duration, frames: frames.length, fpsMin: 1000 / Math.max(...delays), fpsMax: 1000 / Math.min(...delays), }; } _terminate(gif) { gif.abort(); // Clean up after GIF.js. gif.freeWorkers.forEach(w => w.terminate()); } }37:T5cd,async function getImageData(image) { if(image instanceof ImageData) { return new ImageData(new Uint8ClampedArray(image.data), image.width); }; if(image instanceof HTMLImageElement) { await image.decode(); return copy(image, image.naturalWidth, image.naturalHeight); } if(image instanceof HTMLCanvasElement) { return copy(image, image.width, image.height); } if(image instanceof CanvasRenderingContext2D || image instanceof WebGLRenderingContext) { return copy(image.canvas, image.canvas.width, image.canvas.height); } if(image instanceof SVGSVGElement) { image.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns', 'http://www.w3.org/2000/svg'); image.setAttributeNS('http://www.w3.org/2000/xmlns/', 'xmlns:xlink', 'http://www.w3.org/1999/xlink'); const [w, h] = getSVGDimensions(image); const str = (new window.XMLSerializer).serializeToString(image); const img = new Image; img.width = w; img.height = h; img.src = URL.createObjectURL(new Blob([str], {type: 'image/svg+xml'})); await img.decode(); const data = copy(img, w, h); URL.revokeObjectURL(img.src); return data; } throw Error('Invalid image source'); function copy(source, width, height) { const ctx = document.createElement('canvas').getContext('2d'); ctx.canvas.width = width; ctx.canvas.height = height; ctx.drawImage(source, 0, 0); return ctx.getImageData(0, 0, width, height); } }38:[] 31:{"id":"88a8246df5677bae","slug":"gif","title":"GIF Converter (canvas & SVG)","thumbnail":"2a3d1bb8e24e839b0b767cef56039b3bed4be4525da247fff4e0b6a8a3ae435c","access_level":"public","create_time":"$D2018-12-14T10:33:14.388Z","update_time":"$D2021-12-29T15:55:57.505Z","view_time":null,"first_public_time":"$D2021-03-25T14:02:35.346Z","has_unpublished_edits":null,"fork":false,"stars":46,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":766,"publish_version":766,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":22,"collection":{"id":"6d9c7f601029e6bf","slug":"widgets","title":"Widgets and helpers","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"GIF Converter (canvas & SVG)","cells":[{"id":0,"value":"md`# GIF Converter (canvas & SVG)\n\nThis notebook offers a set of helper functions to compose and **generate GIF images from canvas and SVG**. The notebook is subject to changes, so please do always import via *version pinning*:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":735,"value":"md`\n~~~js\nimport {renderGif} from '${PINNED_SLUG}'\n~~~\n\n*Note: SVG support is experimental.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`---\n## Usage\n\n\\`renderGif()\\` scales your animation to arbitrary durations and frames per second. All you need to get started is an animation function that receives the animation offset (ranging from 0 to 1) and returns the updated \\`