big updat:
- update dependencies - add webp support and webp conversion for profile images
2
node_modules/gif.js/.npmignore
generated
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
site/build/
|
||||
109
node_modules/gif.js/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
|
||||
# gif.js
|
||||
|
||||
JavaScript GIF encoder that runs in your browser.
|
||||
|
||||
Uses typed arrays and web workers to render each frame in the background, it's really fast!
|
||||
|
||||
**Demo** - http://jnordberg.github.io/gif.js/
|
||||
|
||||
Works in browsers supporting: [Web Workers](http://www.w3.org/TR/workers/), [File API](http://www.w3.org/TR/FileAPI/) and [Typed Arrays](https://www.khronos.org/registry/typedarray/specs/latest/)
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
Include `gif.js` found in `dist/` in your page. Also make sure to have `gif.worker.js` in the same location.
|
||||
|
||||
```javascript
|
||||
var gif = new GIF({
|
||||
workers: 2,
|
||||
quality: 10
|
||||
});
|
||||
|
||||
// add an image element
|
||||
gif.addFrame(imageElement);
|
||||
|
||||
// or a canvas element
|
||||
gif.addFrame(canvasElement, {delay: 200});
|
||||
|
||||
// or copy the pixels from a canvas context
|
||||
gif.addFrame(ctx, {copy: true});
|
||||
|
||||
gif.on('finished', function(blob) {
|
||||
window.open(URL.createObjectURL(blob));
|
||||
});
|
||||
|
||||
gif.render();
|
||||
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
Options can be passed to the constructor or using the `setOptions` method.
|
||||
|
||||
| Name | Default | Description |
|
||||
| -------------|-----------------|----------------------------------------------------|
|
||||
| repeat | `0` | repeat count, `-1` = no repeat, `0` = forever |
|
||||
| quality | `10` | pixel sample interval, lower is better |
|
||||
| workers | `2` | number of web workers to spawn |
|
||||
| workerScript | `gif.worker.js` | url to load worker script from |
|
||||
| background | `#fff` | background color where source image is transparent |
|
||||
| width | `null` | output image width |
|
||||
| height | `null` | output image height |
|
||||
| transparent | `null` | transparent hex color, `0x00FF00` = green |
|
||||
| dither | `false` | dithering method, e.g. `FloydSteinberg-serpentine` |
|
||||
| debug | `false` | whether to print debug information to console |
|
||||
|
||||
If width or height is `null` image size will be deteremined by first frame added.
|
||||
|
||||
Available dithering methods are:
|
||||
|
||||
* `FloydSteinberg`
|
||||
* `FalseFloydSteinberg`
|
||||
* `Stucki`
|
||||
* `Atkinson`
|
||||
|
||||
You can add `-serpentine` to use serpentine scanning, e.g. `Stucki-serpentine`.
|
||||
|
||||
### addFrame options
|
||||
|
||||
| Name | Default | Description |
|
||||
| -------------|-----------------|----------------------------------------------------|
|
||||
| delay | `500` | frame delay |
|
||||
| copy | `false` | copy the pixel data |
|
||||
|
||||
|
||||
## Acknowledgements
|
||||
|
||||
gif.js is based on:
|
||||
|
||||
* [Kevin Weiner's Animated gif encoder classes](http://www.fmsware.com/stuff/gif.html)
|
||||
* [Neural-Net color quantization algorithm by Anthony Dekker](http://members.ozemail.com.au/~dekker/NEUQUANT.HTML)
|
||||
* [Thibault Imbert's as3gif](https://code.google.com/p/as3gif/)
|
||||
|
||||
Dithering code contributed by @PAEz and @panrafal
|
||||
|
||||
|
||||
## License
|
||||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2013 Johan Nordberg
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
28
node_modules/gif.js/bin/build
generated
vendored
Executable file
|
|
@ -0,0 +1,28 @@
|
|||
#!/usr/bin/env bash
|
||||
|
||||
URL="https://github.com/jnordberg/gif.js"
|
||||
TMP="./dist/tmp"
|
||||
|
||||
if [ -d ./node_modules ]; then
|
||||
PATH="./node_modules/.bin/:$PATH"
|
||||
VERSION=`./bin/version`
|
||||
echo "Packaging gif.js $VERSION"
|
||||
browserify -d -s GIF -t coffeeify src/gif.coffee | exorcist dist/_gif.js.map > dist/_gif.js
|
||||
uglifyjs dist/_gif.js \
|
||||
--preamble "// gif.js $VERSION - $URL" \
|
||||
--in-source-map dist/_gif.js.map \
|
||||
--source-map dist/gif.js.map \
|
||||
--source-map-url gif.js.map \
|
||||
> dist/gif.js
|
||||
browserify -d -t coffeeify --bare src/gif.worker.coffee | exorcist dist/_gif.worker.js.map > dist/_gif.worker.js
|
||||
uglifyjs dist/_gif.worker.js \
|
||||
--preamble "// gif.worker.js $VERSION - $URL" \
|
||||
--in-source-map dist/_gif.worker.js.map \
|
||||
--source-map dist/gif.worker.js.map \
|
||||
--source-map-url gif.worker.js.map \
|
||||
> dist/gif.worker.js
|
||||
rm dist/_*
|
||||
else
|
||||
echo "Build dependencies missing. Run npm install"
|
||||
exit 1
|
||||
fi
|
||||
4
node_modules/gif.js/bin/version
generated
vendored
Executable file
|
|
@ -0,0 +1,4 @@
|
|||
#!/usr/bin/env node
|
||||
var fs = require('fs');
|
||||
var pkg = JSON.parse(fs.readFileSync('package.json'));
|
||||
process.stdout.write(pkg.version);
|
||||
3
node_modules/gif.js/dist/gif.js
generated
vendored
Normal file
1
node_modules/gif.js/dist/gif.js.map
generated
vendored
Normal file
3
node_modules/gif.js/dist/gif.worker.js
generated
vendored
Normal file
1
node_modules/gif.js/dist/gif.worker.js.map
generated
vendored
Normal file
14
node_modules/gif.js/index.js
generated
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
/* _ ___ _
|
||||
(_) / __)(_)
|
||||
____ _ _| |__ _ ___
|
||||
/ _ | (_ __)| |/___)
|
||||
( (_| | | | | _ | |___ |
|
||||
\___ |_| |_|(_)| (___/
|
||||
(_____| (_*/
|
||||
|
||||
module.exports = {
|
||||
NeuQuant: require('./src/NeuQuant.js'),
|
||||
TypedNeuQuant: require('./src/TypedNeuQuant.js'),
|
||||
GIFEncoder: require('./src/GIFEncoder.js'),
|
||||
LZWEncoder: require('./src/LZWEncoder.js')
|
||||
};
|
||||
25
node_modules/gif.js/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "gif.js",
|
||||
"version": "0.2.0",
|
||||
"description": "JavaScript GIF encoding library",
|
||||
"author": "Johan Nordberg <code@johan-nordberg.com>",
|
||||
"main": "index.js",
|
||||
"repository": "https://github.com/jnordberg/gif.js.git",
|
||||
"devDependencies": {
|
||||
"browserify": "^13.1.1",
|
||||
"coffeeify": "^2.1.0",
|
||||
"exorcist": "^0.4.0",
|
||||
"uglify-js": "^2.7.5"
|
||||
},
|
||||
"scripts": {
|
||||
"prepublish": "./bin/build"
|
||||
},
|
||||
"browser": "./dist/gif.js",
|
||||
"keywords": [
|
||||
"gif",
|
||||
"animation",
|
||||
"encoder"
|
||||
],
|
||||
"license": "MIT",
|
||||
"readmeFilename": "README.md"
|
||||
}
|
||||
22
node_modules/gif.js/site/config.json
generated
vendored
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"locals": {
|
||||
"name": "gif.js",
|
||||
"url": "http://jnordberg.github.io/gif.js",
|
||||
"description": "Full-featured JavaScript GIF encoder that runs in your browser.",
|
||||
"keywords": "gif, encoder, animation, browser, unicorn",
|
||||
"version": "3"
|
||||
},
|
||||
"baseUrl": "/gif.js/",
|
||||
"require": {
|
||||
"hljs": "highlight.js"
|
||||
},
|
||||
"nunjucks": {
|
||||
"autoescape": false
|
||||
},
|
||||
"plugins": [
|
||||
"wintersmith-browserify",
|
||||
"wintersmith-less",
|
||||
"wintersmith-nunjucks",
|
||||
"./plugins/jsignore.coffee"
|
||||
]
|
||||
}
|
||||
23
node_modules/gif.js/site/contents/code.md
generated
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
```javascript
|
||||
var gif = new GIF({
|
||||
workers: 2,
|
||||
quality: 10
|
||||
});
|
||||
|
||||
// add a image element
|
||||
gif.addFrame(imageElement);
|
||||
|
||||
// or a canvas element
|
||||
gif.addFrame(canvasElement, {delay: 200});
|
||||
|
||||
// or copy the pixels from a canvas context
|
||||
gif.addFrame(ctx, {copy: true});
|
||||
|
||||
gif.on('finished', function(blob) {
|
||||
window.open(URL.createObjectURL(blob));
|
||||
});
|
||||
|
||||
gif.render();
|
||||
|
||||
```
|
||||
BIN
node_modules/gif.js/site/contents/images/loading.gif
generated
vendored
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
node_modules/gif.js/site/contents/images/logo.gif
generated
vendored
Normal file
|
After Width: | Height: | Size: 50 KiB |
BIN
node_modules/gif.js/site/contents/images/test/anim-ref.gif
generated
vendored
Normal file
|
After Width: | Height: | Size: 468 KiB |
BIN
node_modules/gif.js/site/contents/images/test/anim1.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 133 KiB |
BIN
node_modules/gif.js/site/contents/images/test/anim2.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 132 KiB |
BIN
node_modules/gif.js/site/contents/images/test/anim3.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 153 KiB |
BIN
node_modules/gif.js/site/contents/images/test/anim4.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 152 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test1-orig.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 120 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test1-ref.gif
generated
vendored
Normal file
|
After Width: | Height: | Size: 113 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test2-orig.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 110 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test2-ref.gif
generated
vendored
Normal file
|
After Width: | Height: | Size: 118 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test3-orig.jpg
generated
vendored
Normal file
|
After Width: | Height: | Size: 54 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test3-orig.png
generated
vendored
Normal file
|
After Width: | Height: | Size: 184 KiB |
BIN
node_modules/gif.js/site/contents/images/test/test3-ref.gif
generated
vendored
Normal file
|
After Width: | Height: | Size: 74 KiB |
3
node_modules/gif.js/site/contents/index.json
generated
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"template": "index.html"
|
||||
}
|
||||
2
node_modules/gif.js/site/contents/robots.txt
generated
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
User-agent: *
|
||||
Disallow:
|
||||
109
node_modules/gif.js/site/contents/scripts/main.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
require 'browsernizr/test/css/rgba'
|
||||
require 'browsernizr/test/css/transforms3d'
|
||||
Modernizr = require 'browsernizr'
|
||||
|
||||
require './vendor/mootools.js'
|
||||
|
||||
async = require 'async'
|
||||
ready = require './vendor/ready.js'
|
||||
|
||||
now = window.performance?.now?.bind(window.performance) or Date.now
|
||||
|
||||
# fallback for browsers not supporting createObjectURL
|
||||
blobURLSupport = window.URL?.createObjectURL?
|
||||
buildDataURL = do ->
|
||||
charMap = {}
|
||||
charMap[i] = String.fromCharCode(i) for i in [0...256]
|
||||
return (data) ->
|
||||
str = ''
|
||||
for i in [0...data.length]
|
||||
str += charMap[data[i]]
|
||||
return 'data:image/gif;base64,' + btoa(str)
|
||||
|
||||
loadImage = (src, callback) ->
|
||||
img = new Image()
|
||||
img.onload = ->
|
||||
callback null, img
|
||||
img.onerror = ->
|
||||
callback new Error "Could load #{ src }"
|
||||
img.src = src
|
||||
|
||||
setupDemo = (element) ->
|
||||
element.getElements('.hover-buttons li').addEvents
|
||||
mouseenter: -> element.addClass @className
|
||||
mouseleave: -> element.removeClass @className
|
||||
|
||||
qslider = element.getElement '.quality input'
|
||||
qvalue = element.getElement '.quality span'
|
||||
renderimg = element.getElement 'img.render'
|
||||
logel = element.getElement 'pre'
|
||||
|
||||
gif = new GIF
|
||||
debug: true
|
||||
quality: 10
|
||||
workers: 2
|
||||
|
||||
startTime = null
|
||||
gif.on 'start', ->
|
||||
startTime = now()
|
||||
|
||||
gif.on 'finished', (blob, data) ->
|
||||
if blobURLSupport
|
||||
renderimg.src = URL.createObjectURL(blob)
|
||||
else
|
||||
renderimg.src = buildDataURL(data)
|
||||
delta = now() - startTime
|
||||
logel.set 'text', "Rendered #{ images.length } frame(s) at q#{ gif.options.quality } in #{ delta.toFixed(2) }ms"
|
||||
|
||||
gif.on 'progress', (p) ->
|
||||
logel.set 'text', "Rendering #{ images.length } frame(s) at q#{ gif.options.quality }... #{ Math.round(p * 100) }%"
|
||||
|
||||
images = element.getElements('img.original').map (img) -> img.src
|
||||
async.map images, loadImage, (error, images) ->
|
||||
throw error if error?
|
||||
gif.addFrame image, {delay: 500, copy: true} for image in images
|
||||
gif.render()
|
||||
|
||||
qslider.addEvent 'change', ->
|
||||
val = 31 - parseInt qslider.value
|
||||
qvalue.set 'text', val
|
||||
gif.setOption 'quality', val
|
||||
gif.abort()
|
||||
gif.render()
|
||||
|
||||
(element.getElement '.dither select')?.addEvent 'change', ->
|
||||
gif.setOption 'dither', if @value is 'None' then false else @value
|
||||
gif.abort()
|
||||
gif.render()
|
||||
|
||||
delay = element.getElement '.delay'
|
||||
if delay?
|
||||
delay.getElement('input').addEvent 'change', ->
|
||||
value = parseInt this.value
|
||||
delay.getElement('.value').set 'text', value + 'ms'
|
||||
for frame in gif.frames
|
||||
frame.delay = value
|
||||
gif.abort()
|
||||
gif.render()
|
||||
|
||||
repeat = element.getElement '.repeat'
|
||||
if repeat?
|
||||
repeat.getElement('input').addEvent 'change', ->
|
||||
value = parseInt this.value
|
||||
value = -1 if value is 0
|
||||
value = 0 if value is 21
|
||||
switch value
|
||||
when 0
|
||||
txt = 'forever'
|
||||
when -1
|
||||
txt = 'none'
|
||||
else
|
||||
txt = value
|
||||
repeat.getElement('.value').set 'text', txt
|
||||
gif.setOption 'repeat', value
|
||||
gif.abort()
|
||||
gif.render()
|
||||
|
||||
ready ->
|
||||
for demo in document.body.querySelectorAll '.demo'
|
||||
setupDemo demo
|
||||
4060
node_modules/gif.js/site/contents/scripts/vendor/mootools.js
generated
vendored
Normal file
54
node_modules/gif.js/site/contents/scripts/vendor/ready.js
generated
vendored
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
/*!
|
||||
* domready (c) Dustin Diaz 2012 - License MIT
|
||||
*/
|
||||
!function (name, context, definition) {
|
||||
if (typeof module != 'undefined') module.exports = definition()
|
||||
else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)
|
||||
else context[name] = definition()
|
||||
}('domready', this, function (ready) {
|
||||
|
||||
var fns = [], fn, f = false
|
||||
, doc = document
|
||||
, testEl = doc.documentElement
|
||||
, hack = testEl.doScroll
|
||||
, domContentLoaded = 'DOMContentLoaded'
|
||||
, addEventListener = 'addEventListener'
|
||||
, onreadystatechange = 'onreadystatechange'
|
||||
, readyState = 'readyState'
|
||||
, loaded = /^loade|c/.test(doc[readyState])
|
||||
|
||||
function flush(f) {
|
||||
loaded = 1
|
||||
while (f = fns.shift()) f()
|
||||
}
|
||||
|
||||
doc[addEventListener] && doc[addEventListener](domContentLoaded, fn = function () {
|
||||
doc.removeEventListener(domContentLoaded, fn, f)
|
||||
flush()
|
||||
}, f)
|
||||
|
||||
|
||||
hack && doc.attachEvent(onreadystatechange, fn = function () {
|
||||
if (/^c/.test(doc[readyState])) {
|
||||
doc.detachEvent(onreadystatechange, fn)
|
||||
flush()
|
||||
}
|
||||
})
|
||||
|
||||
return (ready = hack ?
|
||||
function (fn) {
|
||||
self != top ?
|
||||
loaded ? fn() : fns.push(fn) :
|
||||
function () {
|
||||
try {
|
||||
testEl.doScroll('left')
|
||||
} catch (e) {
|
||||
return setTimeout(function() { ready(fn) }, 50)
|
||||
}
|
||||
fn()
|
||||
}()
|
||||
} :
|
||||
function (fn) {
|
||||
loaded ? fn() : fns.push(fn)
|
||||
})
|
||||
})
|
||||
188
node_modules/gif.js/site/contents/styles/main.less
generated
vendored
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
|
||||
@import 'vendor/reset';
|
||||
@import 'vendor/elements';
|
||||
|
||||
@background: #d4d4d4;
|
||||
@text: #131313;
|
||||
|
||||
html, body {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-size: 21px;
|
||||
color: @text;
|
||||
margin: 0;
|
||||
.gradient(@background, @background, lighten(@background, 20%));
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.6em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
margin-bottom: 0.8em;
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
header {
|
||||
padding-top: 1em;
|
||||
h1 {
|
||||
overflow: hidden;
|
||||
text-indent: -100%;
|
||||
background: url(../images/logo.gif);
|
||||
width: 600px;
|
||||
height: 288px;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
font-size: 0.8em;
|
||||
padding: 10em 1em 1em;
|
||||
font-style: italic;
|
||||
&, a {
|
||||
text-decoration: none;
|
||||
color: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
header, footer, .wrap {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.demo, .demo pre {
|
||||
font-family: Menlo, monospace;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.demo {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 2em;
|
||||
.hover-buttons {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
li {
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: #fff;
|
||||
float: left;
|
||||
padding: 10px 12px 9px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
margin-right: 10px;
|
||||
cursor: default;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.images {
|
||||
height: 392px;
|
||||
img {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 600px;
|
||||
height: 392px;
|
||||
&.render {
|
||||
display: block;
|
||||
background: #fff url(../images/loading.gif) no-repeat center center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.original .images img.original {
|
||||
display: block;
|
||||
}
|
||||
&.reference .images img.reference {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.controls {
|
||||
padding: 10px;
|
||||
p {
|
||||
line-height: 1.3;
|
||||
margin: 0;
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
min-width: 80px;
|
||||
}
|
||||
pre {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
|
||||
.tomorrow-comment, pre .comment, pre .title {
|
||||
color: #8e908c;
|
||||
}
|
||||
|
||||
.tomorrow-red, pre .variable, pre .attribute, pre .tag, pre .regexp, pre .ruby .constant, pre .xml .tag .title, pre .xml .pi, pre .xml .doctype, pre .html .doctype, pre .css .id, pre .css .class, pre .css .pseudo {
|
||||
color: #c82829;
|
||||
}
|
||||
|
||||
.tomorrow-orange, pre .number, pre .preprocessor, pre .built_in, pre .literal, pre .params, pre .constant {
|
||||
color: #f5871f;
|
||||
}
|
||||
|
||||
.tomorrow-yellow, pre .ruby .class .title, pre .css .rules .attribute {
|
||||
color: #eab700;
|
||||
}
|
||||
|
||||
.tomorrow-green, pre .string, pre .value, pre .inheritance, pre .header, pre .ruby .symbol, pre .xml .cdata {
|
||||
color: #718c00;
|
||||
}
|
||||
|
||||
.tomorrow-aqua, pre .css .hexcolor {
|
||||
color: #3e999f;
|
||||
}
|
||||
|
||||
.tomorrow-blue, pre .function, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword, pre .perl .sub, pre .javascript .title, pre .coffeescript .title {
|
||||
color: #4271ae;
|
||||
}
|
||||
|
||||
.tomorrow-purple, pre .keyword, pre .javascript .function {
|
||||
color: #8959a8;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: block;
|
||||
background: white;
|
||||
color: #4d4d4c;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
pre.src code {
|
||||
font-size: 0.7em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre .coffeescript .javascript,
|
||||
pre .javascript .xml,
|
||||
pre .tex .formula,
|
||||
pre .xml .javascript,
|
||||
pre .xml .vbscript,
|
||||
pre .xml .css,
|
||||
pre .xml .cdata {
|
||||
opacity: 0.5;
|
||||
}
|
||||
156
node_modules/gif.js/site/contents/styles/vendor/elements.less
generated
vendored
Executable file
|
|
@ -0,0 +1,156 @@
|
|||
//---------------------------------------------------
|
||||
// LESS Elements 0.9
|
||||
//---------------------------------------------------
|
||||
// A set of useful LESS mixins
|
||||
// More info at: http://lesselements.com
|
||||
//---------------------------------------------------
|
||||
|
||||
.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
|
||||
background: @color;
|
||||
background: -webkit-gradient(linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0, @start),
|
||||
color-stop(1, @stop));
|
||||
background: -ms-linear-gradient(bottom,
|
||||
@start,
|
||||
@stop);
|
||||
background: -moz-linear-gradient(center bottom,
|
||||
@start 0%,
|
||||
@stop 100%);
|
||||
background: -o-linear-gradient(@stop,
|
||||
@start);
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
|
||||
}
|
||||
.bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
|
||||
background: @color;
|
||||
background: -webkit-gradient(linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0, rgb(@start,@start,@start)),
|
||||
color-stop(1, rgb(@stop,@stop,@stop)));
|
||||
background: -ms-linear-gradient(bottom,
|
||||
rgb(@start,@start,@start) 0%,
|
||||
rgb(@stop,@stop,@stop) 100%);
|
||||
background: -moz-linear-gradient(center bottom,
|
||||
rgb(@start,@start,@start) 0%,
|
||||
rgb(@stop,@stop,@stop) 100%);
|
||||
background: -o-linear-gradient(rgb(@stop,@stop,@stop),
|
||||
rgb(@start,@start,@start));
|
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
|
||||
}
|
||||
.bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
|
||||
border-top: solid 1px @top-color;
|
||||
border-left: solid 1px @left-color;
|
||||
border-right: solid 1px @right-color;
|
||||
border-bottom: solid 1px @bottom-color;
|
||||
}
|
||||
.drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
|
||||
-webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||
-moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||
box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
|
||||
}
|
||||
.rounded(@radius: 2px) {
|
||||
-webkit-border-radius: @radius;
|
||||
-moz-border-radius: @radius;
|
||||
border-radius: @radius;
|
||||
}
|
||||
.border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
|
||||
-webkit-border-top-right-radius: @topright;
|
||||
-webkit-border-bottom-right-radius: @bottomright;
|
||||
-webkit-border-bottom-left-radius: @bottomleft;
|
||||
-webkit-border-top-left-radius: @topleft;
|
||||
-moz-border-radius-topright: @topright;
|
||||
-moz-border-radius-bottomright: @bottomright;
|
||||
-moz-border-radius-bottomleft: @bottomleft;
|
||||
-moz-border-radius-topleft: @topleft;
|
||||
border-top-right-radius: @topright;
|
||||
border-bottom-right-radius: @bottomright;
|
||||
border-bottom-left-radius: @bottomleft;
|
||||
border-top-left-radius: @topleft;
|
||||
.background-clip(padding-box);
|
||||
}
|
||||
.opacity(@opacity: 0.5) {
|
||||
-moz-opacity: @opacity;
|
||||
-khtml-opacity: @opacity;
|
||||
-webkit-opacity: @opacity;
|
||||
opacity: @opacity;
|
||||
@opperc: @opacity * 100;
|
||||
-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
|
||||
filter: ~"alpha(opacity=@{opperc})";
|
||||
}
|
||||
.transition-duration(@duration: 0.2s) {
|
||||
-moz-transition-duration: @duration;
|
||||
-webkit-transition-duration: @duration;
|
||||
-o-transition-duration: @duration;
|
||||
transition-duration: @duration;
|
||||
}
|
||||
.transform(...) {
|
||||
-webkit-transform: @arguments;
|
||||
-moz-transform: @arguments;
|
||||
-o-transform: @arguments;
|
||||
-ms-transform: @arguments;
|
||||
transform: @arguments;
|
||||
}
|
||||
.rotation(@deg:5deg){
|
||||
.transform(rotate(@deg));
|
||||
}
|
||||
.scale(@ratio:1.5){
|
||||
.transform(scale(@ratio));
|
||||
}
|
||||
.transition(@duration:0.2s, @ease:ease-out) {
|
||||
-webkit-transition: all @duration @ease;
|
||||
-moz-transition: all @duration @ease;
|
||||
-o-transition: all @duration @ease;
|
||||
transition: all @duration @ease;
|
||||
}
|
||||
.inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
|
||||
-webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
|
||||
-moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
|
||||
box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
|
||||
}
|
||||
.box-shadow(@arguments) {
|
||||
-webkit-box-shadow: @arguments;
|
||||
-moz-box-shadow: @arguments;
|
||||
box-shadow: @arguments;
|
||||
}
|
||||
.box-sizing(@sizing: border-box) {
|
||||
-ms-box-sizing: @sizing;
|
||||
-moz-box-sizing: @sizing;
|
||||
-webkit-box-sizing: @sizing;
|
||||
box-sizing: @sizing;
|
||||
}
|
||||
.user-select(@argument: none) {
|
||||
-webkit-user-select: @argument;
|
||||
-moz-user-select: @argument;
|
||||
-ms-user-select: @argument;
|
||||
user-select: @argument;
|
||||
}
|
||||
.columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
|
||||
-moz-column-width: @colwidth;
|
||||
-moz-column-count: @colcount;
|
||||
-moz-column-gap: @colgap;
|
||||
-moz-column-rule-color: @columnRuleColor;
|
||||
-moz-column-rule-style: @columnRuleStyle;
|
||||
-moz-column-rule-width: @columnRuleWidth;
|
||||
-webkit-column-width: @colwidth;
|
||||
-webkit-column-count: @colcount;
|
||||
-webkit-column-gap: @colgap;
|
||||
-webkit-column-rule-color: @columnRuleColor;
|
||||
-webkit-column-rule-style: @columnRuleStyle;
|
||||
-webkit-column-rule-width: @columnRuleWidth;
|
||||
column-width: @colwidth;
|
||||
column-count: @colcount;
|
||||
column-gap: @colgap;
|
||||
column-rule-color: @columnRuleColor;
|
||||
column-rule-style: @columnRuleStyle;
|
||||
column-rule-width: @columnRuleWidth;
|
||||
}
|
||||
.translate(@x:0, @y:0) {
|
||||
.transform(translate(@x, @y));
|
||||
}
|
||||
.background-clip(@argument: padding-box) {
|
||||
-moz-background-clip: @argument;
|
||||
-webkit-background-clip: @argument;
|
||||
background-clip: @argument;
|
||||
}
|
||||
45
node_modules/gif.js/site/contents/styles/vendor/reset.less
generated
vendored
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// http://meyerweb.com/eric/tools/css/reset/
|
||||
// v2.0 | 20110126
|
||||
// License: none (public domain)
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
// HTML5 display-role reset for older browsers
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
65
node_modules/gif.js/site/contents/tests/canvas.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
require '../scripts/vendor/mootools.js'
|
||||
ready = require '../scripts/vendor/ready.js'
|
||||
|
||||
num_frames = 20
|
||||
width = 600
|
||||
height = 300
|
||||
text = 'HYPNO TOAD'
|
||||
textSize = 70
|
||||
|
||||
now = window.performance?.now?.bind(window.performance) or Date.now
|
||||
|
||||
rgb = (rgb...) -> "rgb(#{ rgb.map((v) -> Math.floor(v * 255)).join(',') })"
|
||||
hsl = (hsl...) ->
|
||||
hsl = hsl.map (v, i) -> if i is 0 then v * 360 else "#{ v * 100 }%"
|
||||
return "hsl(#{ hsl.join(',') })"
|
||||
|
||||
ready ->
|
||||
canvas = document.createElement 'canvas'
|
||||
canvas.width = width
|
||||
canvas.height = height
|
||||
|
||||
startTime = null
|
||||
ctx = canvas.getContext '2d'
|
||||
info = document.id 'info'
|
||||
|
||||
gif = new GIF
|
||||
workers: 4
|
||||
workerScript: '/gif.js/gif.worker.js'
|
||||
width: width
|
||||
height: height
|
||||
|
||||
gif.on 'start', -> startTime = now()
|
||||
|
||||
gif.on 'progress', (p) -> info.set 'text', Math.round(p * 100)+'%'
|
||||
|
||||
gif.on 'finished', (blob) ->
|
||||
img = document.id 'result'
|
||||
img.src = URL.createObjectURL(blob)
|
||||
delta = now() - startTime
|
||||
info.set 'text', """
|
||||
100%
|
||||
#{ (delta / 1000).toFixed 2 }sec
|
||||
#{ (blob.size / 1000).toFixed 2 }kb
|
||||
"""
|
||||
|
||||
ctx.font = "bold #{ textSize }px Helvetica"
|
||||
ctx.textAlign = 'center'
|
||||
ctx.textBaseline = 'middle'
|
||||
ctx.lineWidth = 3
|
||||
w2 = width / 2
|
||||
h2 = height / 2
|
||||
for i in [0...num_frames]
|
||||
p = i / (num_frames - 1)
|
||||
grad = ctx.createRadialGradient w2, h2, 0, w2, h2, w2
|
||||
grad.addColorStop 0, hsl p, 1, 0.5
|
||||
grad.addColorStop 1, hsl (p + 0.2) % 1, 1, 0.4
|
||||
ctx.fillStyle = grad
|
||||
ctx.fillRect 0, 0, width, height
|
||||
ctx.fillStyle = hsl (p + 0.5) % 1, 1, 0.7
|
||||
ctx.strokeStyle = hsl (p + 0.8) % 1, 1, 0.9
|
||||
ctx.fillText text, w2, h2
|
||||
ctx.strokeText text, w2, h2
|
||||
gif.addFrame ctx, {copy: true, delay: 20}
|
||||
|
||||
gif.render()
|
||||
10
node_modules/gif.js/site/contents/tests/canvas.md
generated
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Canvas rendering
|
||||
script: canvas.coffee
|
||||
template: test.html
|
||||
---
|
||||
|
||||
<p id="info">Loading...</p>
|
||||
|
||||
<img id="result">
|
||||
|
||||
BIN
node_modules/gif.js/site/contents/tests/clip.mp4
generated
vendored
Normal file
BIN
node_modules/gif.js/site/contents/tests/clip.ogv
generated
vendored
Normal file
70
node_modules/gif.js/site/contents/tests/video.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
require '../scripts/vendor/mootools.js'
|
||||
ready = require '../scripts/vendor/ready.js'
|
||||
now = window.performance?.now?.bind(window.performance) or Date.now
|
||||
|
||||
ready ->
|
||||
info = document.id 'info'
|
||||
video = document.id 'video'
|
||||
button = document.id 'go'
|
||||
sample = document.id 'sample'
|
||||
|
||||
gif = new GIF
|
||||
workers: 4
|
||||
workerScript: '/gif.js/gif.worker.js'
|
||||
width: 600
|
||||
height: 337
|
||||
|
||||
startTime = null
|
||||
sampleInterval = null
|
||||
|
||||
sampleUpdate = ->
|
||||
sampleInterval = parseInt sample.value
|
||||
gif.abort()
|
||||
document.id('info').set 'text', """
|
||||
ready to start with a sample interval of #{ sampleInterval }ms
|
||||
"""
|
||||
|
||||
video.addEventListener 'canplay', ->
|
||||
button.disabled = false
|
||||
sample.disabled = false
|
||||
sampleUpdate()
|
||||
|
||||
sample.addEvent 'change', sampleUpdate
|
||||
|
||||
button.addEvent 'click', ->
|
||||
video.pause()
|
||||
video.currentTime = 0
|
||||
gif.abort()
|
||||
gif.frames = []
|
||||
video.play()
|
||||
|
||||
gif.on 'start', -> startTime = now()
|
||||
|
||||
gif.on 'progress', (p) ->
|
||||
info.set 'text', "rendering: #{ Math.round(p * 100) }%"
|
||||
|
||||
gif.on 'finished', (blob) ->
|
||||
img = document.id 'result'
|
||||
img.src = URL.createObjectURL(blob)
|
||||
delta = now() - startTime
|
||||
info.set 'text', """
|
||||
done in
|
||||
#{ (delta / 1000).toFixed 2 }sec,
|
||||
size #{ (blob.size / 1000).toFixed 2 }kb
|
||||
"""
|
||||
|
||||
# this might not be the best approach to capturing
|
||||
# html video, but i but i can't seek since my dev server
|
||||
# doesn't support http byte requests
|
||||
timer = null
|
||||
capture = ->
|
||||
info.set 'html', "capturing at #{ video.currentTime }"
|
||||
gif.addFrame video, {copy: true, delay: sampleInterval}
|
||||
|
||||
video.addEventListener 'play', ->
|
||||
clearInterval timer
|
||||
timer = setInterval capture, sampleInterval
|
||||
|
||||
video.addEventListener 'ended', ->
|
||||
clearInterval timer
|
||||
gif.render()
|
||||
20
node_modules/gif.js/site/contents/tests/video.md
generated
vendored
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
---
|
||||
title: Video to GIF
|
||||
script: video.coffee
|
||||
template: test.html
|
||||
---
|
||||
|
||||
<p>
|
||||
<input disabled id="sample" type="range" step="1" min="20" max="500" value="100">
|
||||
<button id="go" disabled>Do it!</button>
|
||||
</p>
|
||||
|
||||
<p id="info">Loading...</p>
|
||||
|
||||
<video id="video" width="600">
|
||||
<source src="clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.'>
|
||||
<source src="clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
|
||||
</video>
|
||||
|
||||
<img id="result">
|
||||
|
||||
11
node_modules/gif.js/site/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"wintersmith-browserify": "*",
|
||||
"wintersmith-less": "*",
|
||||
"wintersmith-nunjucks": "*",
|
||||
"browsernizr": "*",
|
||||
"async": "~0.2.8",
|
||||
"highlight.js": "~7.3.0"
|
||||
}
|
||||
}
|
||||
4
node_modules/gif.js/site/plugins/jsignore.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
module.exports = (env, callback) ->
|
||||
# hack to have browserify ignore the symlinked gif.js
|
||||
env.registerContentPlugin 'files', 'gif.*js', env.plugins.StaticFile
|
||||
callback()
|
||||
152
node_modules/gif.js/site/templates/index.html
generated
vendored
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="gif.js?v={{ version }}"></script>
|
||||
<script src="scripts/main.js?v={{ version }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
<h2>Usage</h2>
|
||||
{{ contents['code.md'].html }}
|
||||
|
||||
<h2>Demo</h2>
|
||||
|
||||
<p>
|
||||
GIF images are generated in the background using web workers. Hover the original and reference
|
||||
tabs to see respective image.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Reference images are rendered with photoshop cs6 using the perceptual setting with no dither.
|
||||
</p>
|
||||
|
||||
<div class="demo">
|
||||
<div class="images">
|
||||
<img class="render">
|
||||
<img class="original" src="images/test/anim1.jpg">
|
||||
<img class="original" src="images/test/anim2.jpg">
|
||||
<img class="original" src="images/test/anim3.jpg">
|
||||
<img class="original" src="images/test/anim4.jpg">
|
||||
<img class="reference" src="images/test/anim-ref.gif">
|
||||
</div>
|
||||
<ul class="hover-buttons">
|
||||
<li class="original">Original</li>
|
||||
<li class="reference">Reference</li>
|
||||
</ul>
|
||||
<div class="controls">
|
||||
<p class="quality">
|
||||
<label>Quality</label>
|
||||
<input type="range" step="1" min="1" max="30" value="20">
|
||||
<span class="value">10</span>
|
||||
</p>
|
||||
<p class="delay">
|
||||
<label>Delay</label>
|
||||
<input type="range" step="1" min="0" max="1000" value="500">
|
||||
<span class="value">500ms</span>
|
||||
</p>
|
||||
<p class="repeat">
|
||||
<label>Repeat</label>
|
||||
<input type="range" step="1" min="0" max="21" value="21">
|
||||
<span class="value">forever</span>
|
||||
</p>
|
||||
<p class="dither">
|
||||
<label>Dither</label>
|
||||
<select>
|
||||
<option selected>None</option>
|
||||
<option>Atkinson</option>
|
||||
<option>Atkinson-serpentine </option>
|
||||
<option>FalseFloydSteinberg</option>
|
||||
<option>FalseFloydSteinberg-serpentine</option>
|
||||
<option>FloydSteinberg</option>
|
||||
<option>FloydSteinberg-serpentine</option>
|
||||
<option>Stucki</option>
|
||||
<option>Stucki-serpentine</option>
|
||||
</select>
|
||||
</p>
|
||||
<p class="info">
|
||||
<pre>Loading...</pre>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<div class="images">
|
||||
<img class="render">
|
||||
<img class="original" src="images/test/test1-orig.jpg">
|
||||
<img class="reference" src="images/test/test1-ref.gif">
|
||||
</div>
|
||||
<ul class="hover-buttons">
|
||||
<li class="original">Original</li>
|
||||
<li class="reference">Reference</li>
|
||||
</ul>
|
||||
<div class="controls">
|
||||
<p class="quality">
|
||||
<label>Quality</label>
|
||||
<input type="range" step="1" min="1" max="30" value="20">
|
||||
<span class="value">10</span>
|
||||
</p>
|
||||
<p class="dither">
|
||||
<label>Dither</label>
|
||||
<select>
|
||||
<option selected>None</option>
|
||||
<option>Atkinson</option>
|
||||
<option>Atkinson-serpentine </option>
|
||||
<option>FalseFloydSteinberg</option>
|
||||
<option>FalseFloydSteinberg-serpentine</option>
|
||||
<option>FloydSteinberg</option>
|
||||
<option>FloydSteinberg-serpentine</option>
|
||||
<option>Stucki</option>
|
||||
<option>Stucki-serpentine</option>
|
||||
</select>
|
||||
</p>
|
||||
<p class="info">
|
||||
<pre>Loading...</pre>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo">
|
||||
<div class="images">
|
||||
<img class="render">
|
||||
<img class="original" src="images/test/test3-orig.png">
|
||||
<img class="reference" src="images/test/test3-ref.gif">
|
||||
</div>
|
||||
<ul class="hover-buttons">
|
||||
<li class="original">Original</li>
|
||||
<li class="reference">Reference</li>
|
||||
</ul>
|
||||
<div class="controls">
|
||||
<p class="quality">
|
||||
<label>Quality</label>
|
||||
<input type="range" step="1" min="1" max="30" value="20">
|
||||
<span class="value">10</span>
|
||||
</p>
|
||||
<p class="dither">
|
||||
<label>Dither</label>
|
||||
<select>
|
||||
<option selected>None</option>
|
||||
<option>Atkinson</option>
|
||||
<option>Atkinson-serpentine </option>
|
||||
<option>FalseFloydSteinberg</option>
|
||||
<option>FalseFloydSteinberg-serpentine</option>
|
||||
<option>FloydSteinberg</option>
|
||||
<option>FloydSteinberg-serpentine</option>
|
||||
<option>Stucki</option>
|
||||
<option>Stucki-serpentine</option>
|
||||
</select>
|
||||
</p>
|
||||
<p class="info">
|
||||
<pre>Loading...</pre>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Other tests</h2>
|
||||
<ul>
|
||||
{% for test in contents.tests._.pages %}
|
||||
<li><a href="{{ test.url }}">{{ test.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
{% endblock %}
|
||||
39
node_modules/gif.js/site/templates/layout.html
generated
vendored
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="no-js">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>{{ name }}</title>
|
||||
<meta name="description" content="{{ description }}">
|
||||
<meta name="keywords" content="{{ keywords }}">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<meta property="og:title" content="{{ name }}">
|
||||
<meta property="og:url" content="{{ url }}">
|
||||
<meta property="og:description" content="{{ description }}">
|
||||
<meta property="og:type" content="website">
|
||||
<link rel="stylesheet" href="{{ env.config.baseUrl }}styles/main.css">
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
ga('create', 'UA-41063995-1', 'jnordberg.github.io');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
{% block scripts %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>gif.js</h1>
|
||||
<p>{{ description }}</p>
|
||||
<p class="github"><a href="https://github.com/jnordberg/gif.js">Download & Docs on GitHub</a></p>
|
||||
</header>
|
||||
<div class="wrap">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
<footer>
|
||||
<a href="https://creativecommons.org/licenses/by-sa/3.0/">©©</a> 2013
|
||||
<a href="http://johan-nordberg.com/">Johan Nordberg</a>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
19
node_modules/gif.js/site/templates/test.html
generated
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{% extends 'layout.html' %}
|
||||
|
||||
{% set script = contents.tests[page.metadata.script] %}
|
||||
|
||||
{% block scripts %}
|
||||
<script src="{{ env.config.baseUrl }}gif.js?v={{ version }}"></script>
|
||||
<script src="{{ script.url }}?v={{ version }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<h2>{{ page.title }}</h2>
|
||||
<div class="test">
|
||||
{{ page.html }}
|
||||
</div>
|
||||
<h2>Source</h2>
|
||||
<pre class="src">
|
||||
<code>{{ hljs.highlightAuto(script.source).value }}</code>
|
||||
</pre>
|
||||
{% endblock %}
|
||||
554
node_modules/gif.js/src/GIFEncoder.js
generated
vendored
Normal file
|
|
@ -0,0 +1,554 @@
|
|||
/*
|
||||
GIFEncoder.js
|
||||
|
||||
Authors
|
||||
Kevin Weiner (original Java version - kweiner@fmsware.com)
|
||||
Thibault Imbert (AS3 version - bytearray.org)
|
||||
Johan Nordberg (JS version - code@johan-nordberg.com)
|
||||
*/
|
||||
|
||||
var NeuQuant = require('./TypedNeuQuant.js');
|
||||
var LZWEncoder = require('./LZWEncoder.js');
|
||||
|
||||
function ByteArray() {
|
||||
this.page = -1;
|
||||
this.pages = [];
|
||||
this.newPage();
|
||||
}
|
||||
|
||||
ByteArray.pageSize = 4096;
|
||||
ByteArray.charMap = {};
|
||||
|
||||
for (var i = 0; i < 256; i++)
|
||||
ByteArray.charMap[i] = String.fromCharCode(i);
|
||||
|
||||
ByteArray.prototype.newPage = function() {
|
||||
this.pages[++this.page] = new Uint8Array(ByteArray.pageSize);
|
||||
this.cursor = 0;
|
||||
};
|
||||
|
||||
ByteArray.prototype.getData = function() {
|
||||
var rv = '';
|
||||
for (var p = 0; p < this.pages.length; p++) {
|
||||
for (var i = 0; i < ByteArray.pageSize; i++) {
|
||||
rv += ByteArray.charMap[this.pages[p][i]];
|
||||
}
|
||||
}
|
||||
return rv;
|
||||
};
|
||||
|
||||
ByteArray.prototype.writeByte = function(val) {
|
||||
if (this.cursor >= ByteArray.pageSize) this.newPage();
|
||||
this.pages[this.page][this.cursor++] = val;
|
||||
};
|
||||
|
||||
ByteArray.prototype.writeUTFBytes = function(string) {
|
||||
for (var l = string.length, i = 0; i < l; i++)
|
||||
this.writeByte(string.charCodeAt(i));
|
||||
};
|
||||
|
||||
ByteArray.prototype.writeBytes = function(array, offset, length) {
|
||||
for (var l = length || array.length, i = offset || 0; i < l; i++)
|
||||
this.writeByte(array[i]);
|
||||
};
|
||||
|
||||
function GIFEncoder(width, height) {
|
||||
// image size
|
||||
this.width = ~~width;
|
||||
this.height = ~~height;
|
||||
|
||||
// transparent color if given
|
||||
this.transparent = null;
|
||||
|
||||
// transparent index in color table
|
||||
this.transIndex = 0;
|
||||
|
||||
// -1 = no repeat, 0 = forever. anything else is repeat count
|
||||
this.repeat = -1;
|
||||
|
||||
// frame delay (hundredths)
|
||||
this.delay = 0;
|
||||
|
||||
this.image = null; // current frame
|
||||
this.pixels = null; // BGR byte array from frame
|
||||
this.indexedPixels = null; // converted frame indexed to palette
|
||||
this.colorDepth = null; // number of bit planes
|
||||
this.colorTab = null; // RGB palette
|
||||
this.neuQuant = null; // NeuQuant instance that was used to generate this.colorTab.
|
||||
this.usedEntry = new Array(); // active palette entries
|
||||
this.palSize = 7; // color table size (bits-1)
|
||||
this.dispose = -1; // disposal code (-1 = use default)
|
||||
this.firstFrame = true;
|
||||
this.sample = 10; // default sample interval for quantizer
|
||||
this.dither = false; // default dithering
|
||||
this.globalPalette = false;
|
||||
|
||||
this.out = new ByteArray();
|
||||
}
|
||||
|
||||
/*
|
||||
Sets the delay time between each frame, or changes it for subsequent frames
|
||||
(applies to last frame added)
|
||||
*/
|
||||
GIFEncoder.prototype.setDelay = function(milliseconds) {
|
||||
this.delay = Math.round(milliseconds / 10);
|
||||
};
|
||||
|
||||
/*
|
||||
Sets frame rate in frames per second.
|
||||
*/
|
||||
GIFEncoder.prototype.setFrameRate = function(fps) {
|
||||
this.delay = Math.round(100 / fps);
|
||||
};
|
||||
|
||||
/*
|
||||
Sets the GIF frame disposal code for the last added frame and any
|
||||
subsequent frames.
|
||||
|
||||
Default is 0 if no transparent color has been set, otherwise 2.
|
||||
*/
|
||||
GIFEncoder.prototype.setDispose = function(disposalCode) {
|
||||
if (disposalCode >= 0) this.dispose = disposalCode;
|
||||
};
|
||||
|
||||
/*
|
||||
Sets the number of times the set of GIF frames should be played.
|
||||
|
||||
-1 = play once
|
||||
0 = repeat indefinitely
|
||||
|
||||
Default is -1
|
||||
|
||||
Must be invoked before the first image is added
|
||||
*/
|
||||
|
||||
GIFEncoder.prototype.setRepeat = function(repeat) {
|
||||
this.repeat = repeat;
|
||||
};
|
||||
|
||||
/*
|
||||
Sets the transparent color for the last added frame and any subsequent
|
||||
frames. Since all colors are subject to modification in the quantization
|
||||
process, the color in the final palette for each frame closest to the given
|
||||
color becomes the transparent color for that frame. May be set to null to
|
||||
indicate no transparent color.
|
||||
*/
|
||||
GIFEncoder.prototype.setTransparent = function(color) {
|
||||
this.transparent = color;
|
||||
};
|
||||
|
||||
/*
|
||||
Adds next GIF frame. The frame is not written immediately, but is
|
||||
actually deferred until the next frame is received so that timing
|
||||
data can be inserted. Invoking finish() flushes all frames.
|
||||
*/
|
||||
GIFEncoder.prototype.addFrame = function(imageData) {
|
||||
this.image = imageData;
|
||||
|
||||
this.colorTab = this.globalPalette && this.globalPalette.slice ? this.globalPalette : null;
|
||||
|
||||
this.getImagePixels(); // convert to correct format if necessary
|
||||
this.analyzePixels(); // build color table & map pixels
|
||||
|
||||
if (this.globalPalette === true) this.globalPalette = this.colorTab;
|
||||
|
||||
if (this.firstFrame) {
|
||||
this.writeLSD(); // logical screen descriptior
|
||||
this.writePalette(); // global color table
|
||||
if (this.repeat >= 0) {
|
||||
// use NS app extension to indicate reps
|
||||
this.writeNetscapeExt();
|
||||
}
|
||||
}
|
||||
|
||||
this.writeGraphicCtrlExt(); // write graphic control extension
|
||||
this.writeImageDesc(); // image descriptor
|
||||
if (!this.firstFrame && !this.globalPalette) this.writePalette(); // local color table
|
||||
this.writePixels(); // encode and write pixel data
|
||||
|
||||
this.firstFrame = false;
|
||||
};
|
||||
|
||||
/*
|
||||
Adds final trailer to the GIF stream, if you don't call the finish method
|
||||
the GIF stream will not be valid.
|
||||
*/
|
||||
GIFEncoder.prototype.finish = function() {
|
||||
this.out.writeByte(0x3b); // gif trailer
|
||||
};
|
||||
|
||||
/*
|
||||
Sets quality of color quantization (conversion of images to the maximum 256
|
||||
colors allowed by the GIF specification). Lower values (minimum = 1)
|
||||
produce better colors, but slow processing significantly. 10 is the
|
||||
default, and produces good color mapping at reasonable speeds. Values
|
||||
greater than 20 do not yield significant improvements in speed.
|
||||
*/
|
||||
GIFEncoder.prototype.setQuality = function(quality) {
|
||||
if (quality < 1) quality = 1;
|
||||
this.sample = quality;
|
||||
};
|
||||
|
||||
/*
|
||||
Sets dithering method. Available are:
|
||||
- FALSE no dithering
|
||||
- TRUE or FloydSteinberg
|
||||
- FalseFloydSteinberg
|
||||
- Stucki
|
||||
- Atkinson
|
||||
You can add '-serpentine' to use serpentine scanning
|
||||
*/
|
||||
GIFEncoder.prototype.setDither = function(dither) {
|
||||
if (dither === true) dither = 'FloydSteinberg';
|
||||
this.dither = dither;
|
||||
};
|
||||
|
||||
/*
|
||||
Sets global palette for all frames.
|
||||
You can provide TRUE to create global palette from first picture.
|
||||
Or an array of r,g,b,r,g,b,...
|
||||
*/
|
||||
GIFEncoder.prototype.setGlobalPalette = function(palette) {
|
||||
this.globalPalette = palette;
|
||||
};
|
||||
|
||||
/*
|
||||
Returns global palette used for all frames.
|
||||
If setGlobalPalette(true) was used, then this function will return
|
||||
calculated palette after the first frame is added.
|
||||
*/
|
||||
GIFEncoder.prototype.getGlobalPalette = function() {
|
||||
return (this.globalPalette && this.globalPalette.slice && this.globalPalette.slice(0)) || this.globalPalette;
|
||||
};
|
||||
|
||||
/*
|
||||
Writes GIF file header
|
||||
*/
|
||||
GIFEncoder.prototype.writeHeader = function() {
|
||||
this.out.writeUTFBytes("GIF89a");
|
||||
};
|
||||
|
||||
/*
|
||||
Analyzes current frame colors and creates color map.
|
||||
*/
|
||||
GIFEncoder.prototype.analyzePixels = function() {
|
||||
if (!this.colorTab) {
|
||||
this.neuQuant = new NeuQuant(this.pixels, this.sample);
|
||||
this.neuQuant.buildColormap(); // create reduced palette
|
||||
this.colorTab = this.neuQuant.getColormap();
|
||||
}
|
||||
|
||||
// map image pixels to new palette
|
||||
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;
|
||||
|
||||
// get closest match to transparent color if specified
|
||||
if (this.transparent !== null) {
|
||||
this.transIndex = this.findClosest(this.transparent, true);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Index pixels, without dithering
|
||||
*/
|
||||
GIFEncoder.prototype.indexPixels = function(imgq) {
|
||||
var nPix = this.pixels.length / 3;
|
||||
this.indexedPixels = new Uint8Array(nPix);
|
||||
var k = 0;
|
||||
for (var j = 0; j < nPix; j++) {
|
||||
var index = this.findClosestRGB(
|
||||
this.pixels[k++] & 0xff,
|
||||
this.pixels[k++] & 0xff,
|
||||
this.pixels[k++] & 0xff
|
||||
);
|
||||
this.usedEntry[index] = true;
|
||||
this.indexedPixels[j] = index;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Taken from http://jsbin.com/iXofIji/2/edit by PAEz
|
||||
*/
|
||||
GIFEncoder.prototype.ditherPixels = function(kernel, serpentine) {
|
||||
var kernels = {
|
||||
FalseFloydSteinberg: [
|
||||
[3 / 8, 1, 0],
|
||||
[3 / 8, 0, 1],
|
||||
[2 / 8, 1, 1]
|
||||
],
|
||||
FloydSteinberg: [
|
||||
[7 / 16, 1, 0],
|
||||
[3 / 16, -1, 1],
|
||||
[5 / 16, 0, 1],
|
||||
[1 / 16, 1, 1]
|
||||
],
|
||||
Stucki: [
|
||||
[8 / 42, 1, 0],
|
||||
[4 / 42, 2, 0],
|
||||
[2 / 42, -2, 1],
|
||||
[4 / 42, -1, 1],
|
||||
[8 / 42, 0, 1],
|
||||
[4 / 42, 1, 1],
|
||||
[2 / 42, 2, 1],
|
||||
[1 / 42, -2, 2],
|
||||
[2 / 42, -1, 2],
|
||||
[4 / 42, 0, 2],
|
||||
[2 / 42, 1, 2],
|
||||
[1 / 42, 2, 2]
|
||||
],
|
||||
Atkinson: [
|
||||
[1 / 8, 1, 0],
|
||||
[1 / 8, 2, 0],
|
||||
[1 / 8, -1, 1],
|
||||
[1 / 8, 0, 1],
|
||||
[1 / 8, 1, 1],
|
||||
[1 / 8, 0, 2]
|
||||
]
|
||||
};
|
||||
|
||||
if (!kernel || !kernels[kernel]) {
|
||||
throw 'Unknown dithering kernel: ' + kernel;
|
||||
}
|
||||
|
||||
var ds = kernels[kernel];
|
||||
var index = 0,
|
||||
height = this.height,
|
||||
width = this.width,
|
||||
data = this.pixels;
|
||||
var direction = serpentine ? -1 : 1;
|
||||
|
||||
this.indexedPixels = new Uint8Array(this.pixels.length / 3);
|
||||
|
||||
for (var y = 0; y < height; y++) {
|
||||
|
||||
if (serpentine) direction = direction * -1;
|
||||
|
||||
for (var x = (direction == 1 ? 0 : width - 1), xend = (direction == 1 ? width : 0); x !== xend; x += direction) {
|
||||
|
||||
index = (y * width) + x;
|
||||
// Get original colour
|
||||
var idx = index * 3;
|
||||
var r1 = data[idx];
|
||||
var g1 = data[idx + 1];
|
||||
var b1 = data[idx + 2];
|
||||
|
||||
// Get converted colour
|
||||
idx = this.findClosestRGB(r1, g1, b1);
|
||||
this.usedEntry[idx] = true;
|
||||
this.indexedPixels[index] = idx;
|
||||
idx *= 3;
|
||||
var r2 = this.colorTab[idx];
|
||||
var g2 = this.colorTab[idx + 1];
|
||||
var b2 = this.colorTab[idx + 2];
|
||||
|
||||
var er = r1 - r2;
|
||||
var eg = g1 - g2;
|
||||
var eb = b1 - b2;
|
||||
|
||||
for (var i = (direction == 1 ? 0: ds.length - 1), end = (direction == 1 ? ds.length : 0); i !== end; i += direction) {
|
||||
var x1 = ds[i][1]; // *direction; // Should this by timesd by direction?..to make the kernel go in the opposite direction....got no idea....
|
||||
var y1 = ds[i][2];
|
||||
if (x1 + x >= 0 && x1 + x < width && y1 + y >= 0 && y1 + y < height) {
|
||||
var d = ds[i][0];
|
||||
idx = index + x1 + (y1 * width);
|
||||
idx *= 3;
|
||||
|
||||
data[idx] = Math.max(0, Math.min(255, data[idx] + er * d));
|
||||
data[idx + 1] = Math.max(0, Math.min(255, data[idx + 1] + eg * d));
|
||||
data[idx + 2] = Math.max(0, Math.min(255, data[idx + 2] + eb * d));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Returns index of palette color closest to c
|
||||
*/
|
||||
GIFEncoder.prototype.findClosest = function(c, used) {
|
||||
return this.findClosestRGB((c & 0xFF0000) >> 16, (c & 0x00FF00) >> 8, (c & 0x0000FF), 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 < len; index++) {
|
||||
var dr = r - (this.colorTab[i++] & 0xff);
|
||||
var dg = g - (this.colorTab[i++] & 0xff);
|
||||
var db = b - (this.colorTab[i++] & 0xff);
|
||||
var d = dr * dr + dg * dg + db * db;
|
||||
if ((!used || this.usedEntry[index]) && (d < dmin)) {
|
||||
dmin = d;
|
||||
minpos = index;
|
||||
}
|
||||
}
|
||||
|
||||
return minpos;
|
||||
};
|
||||
|
||||
/*
|
||||
Extracts image pixels into byte array pixels
|
||||
(removes alphachannel from canvas imagedata)
|
||||
*/
|
||||
GIFEncoder.prototype.getImagePixels = function() {
|
||||
var w = this.width;
|
||||
var h = this.height;
|
||||
this.pixels = new Uint8Array(w * h * 3);
|
||||
|
||||
var data = this.image;
|
||||
var srcPos = 0;
|
||||
var count = 0;
|
||||
|
||||
for (var i = 0; i < h; i++) {
|
||||
for (var j = 0; j < w; j++) {
|
||||
this.pixels[count++] = data[srcPos++];
|
||||
this.pixels[count++] = data[srcPos++];
|
||||
this.pixels[count++] = data[srcPos++];
|
||||
srcPos++;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Writes Graphic Control Extension
|
||||
*/
|
||||
GIFEncoder.prototype.writeGraphicCtrlExt = function() {
|
||||
this.out.writeByte(0x21); // extension introducer
|
||||
this.out.writeByte(0xf9); // GCE label
|
||||
this.out.writeByte(4); // data block size
|
||||
|
||||
var transp, disp;
|
||||
if (this.transparent === null) {
|
||||
transp = 0;
|
||||
disp = 0; // dispose = no action
|
||||
} else {
|
||||
transp = 1;
|
||||
disp = 2; // force clear if using transparent color
|
||||
}
|
||||
|
||||
if (this.dispose >= 0) {
|
||||
disp = dispose & 7; // user override
|
||||
}
|
||||
disp <<= 2;
|
||||
|
||||
// packed fields
|
||||
this.out.writeByte(
|
||||
0 | // 1:3 reserved
|
||||
disp | // 4:6 disposal
|
||||
0 | // 7 user input - 0 = none
|
||||
transp // 8 transparency flag
|
||||
);
|
||||
|
||||
this.writeShort(this.delay); // delay x 1/100 sec
|
||||
this.out.writeByte(this.transIndex); // transparent color index
|
||||
this.out.writeByte(0); // block terminator
|
||||
};
|
||||
|
||||
/*
|
||||
Writes Image Descriptor
|
||||
*/
|
||||
GIFEncoder.prototype.writeImageDesc = function() {
|
||||
this.out.writeByte(0x2c); // image separator
|
||||
this.writeShort(0); // image position x,y = 0,0
|
||||
this.writeShort(0);
|
||||
this.writeShort(this.width); // image size
|
||||
this.writeShort(this.height);
|
||||
|
||||
// packed fields
|
||||
if (this.firstFrame || this.globalPalette) {
|
||||
// no LCT - GCT is used for first (or only) frame
|
||||
this.out.writeByte(0);
|
||||
} else {
|
||||
// specify normal LCT
|
||||
this.out.writeByte(
|
||||
0x80 | // 1 local color table 1=yes
|
||||
0 | // 2 interlace - 0=no
|
||||
0 | // 3 sorted - 0=no
|
||||
0 | // 4-5 reserved
|
||||
this.palSize // 6-8 size of color table
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
Writes Logical Screen Descriptor
|
||||
*/
|
||||
GIFEncoder.prototype.writeLSD = function() {
|
||||
// logical screen size
|
||||
this.writeShort(this.width);
|
||||
this.writeShort(this.height);
|
||||
|
||||
// packed fields
|
||||
this.out.writeByte(
|
||||
0x80 | // 1 : global color table flag = 1 (gct used)
|
||||
0x70 | // 2-4 : color resolution = 7
|
||||
0x00 | // 5 : gct sort flag = 0
|
||||
this.palSize // 6-8 : gct size
|
||||
);
|
||||
|
||||
this.out.writeByte(0); // background color index
|
||||
this.out.writeByte(0); // pixel aspect ratio - assume 1:1
|
||||
};
|
||||
|
||||
/*
|
||||
Writes Netscape application extension to define repeat count.
|
||||
*/
|
||||
GIFEncoder.prototype.writeNetscapeExt = function() {
|
||||
this.out.writeByte(0x21); // extension introducer
|
||||
this.out.writeByte(0xff); // app extension label
|
||||
this.out.writeByte(11); // block size
|
||||
this.out.writeUTFBytes('NETSCAPE2.0'); // app id + auth code
|
||||
this.out.writeByte(3); // sub-block size
|
||||
this.out.writeByte(1); // loop sub-block id
|
||||
this.writeShort(this.repeat); // loop count (extra iterations, 0=repeat forever)
|
||||
this.out.writeByte(0); // block terminator
|
||||
};
|
||||
|
||||
/*
|
||||
Writes color table
|
||||
*/
|
||||
GIFEncoder.prototype.writePalette = function() {
|
||||
this.out.writeBytes(this.colorTab);
|
||||
var n = (3 * 256) - this.colorTab.length;
|
||||
for (var i = 0; i < n; i++)
|
||||
this.out.writeByte(0);
|
||||
};
|
||||
|
||||
GIFEncoder.prototype.writeShort = function(pValue) {
|
||||
this.out.writeByte(pValue & 0xFF);
|
||||
this.out.writeByte((pValue >> 8) & 0xFF);
|
||||
};
|
||||
|
||||
/*
|
||||
Encodes and writes pixel data
|
||||
*/
|
||||
GIFEncoder.prototype.writePixels = function() {
|
||||
var enc = new LZWEncoder(this.width, this.height, this.indexedPixels, this.colorDepth);
|
||||
enc.encode(this.out);
|
||||
};
|
||||
|
||||
/*
|
||||
Retrieves the GIF stream
|
||||
*/
|
||||
GIFEncoder.prototype.stream = function() {
|
||||
return this.out;
|
||||
};
|
||||
|
||||
module.exports = GIFEncoder;
|
||||
209
node_modules/gif.js/src/LZWEncoder.js
generated
vendored
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
/*
|
||||
LZWEncoder.js
|
||||
|
||||
Authors
|
||||
Kevin Weiner (original Java version - kweiner@fmsware.com)
|
||||
Thibault Imbert (AS3 version - bytearray.org)
|
||||
Johan Nordberg (JS version - code@johan-nordberg.com)
|
||||
|
||||
Acknowledgements
|
||||
GIFCOMPR.C - GIF Image compression routines
|
||||
Lempel-Ziv compression based on 'compress'. GIF modifications by
|
||||
David Rowley (mgardi@watdcsu.waterloo.edu)
|
||||
GIF Image compression - modified 'compress'
|
||||
Based on: compress.c - File compression ala IEEE Computer, June 1984.
|
||||
By Authors: Spencer W. Thomas (decvax!harpo!utah-cs!utah-gr!thomas)
|
||||
Jim McKie (decvax!mcvax!jim)
|
||||
Steve Davies (decvax!vax135!petsd!peora!srd)
|
||||
Ken Turkowski (decvax!decwrl!turtlevax!ken)
|
||||
James A. Woods (decvax!ihnp4!ames!jaw)
|
||||
Joe Orost (decvax!vax135!petsd!joe)
|
||||
*/
|
||||
|
||||
var EOF = -1;
|
||||
var BITS = 12;
|
||||
var HSIZE = 5003; // 80% occupancy
|
||||
var masks = [0x0000, 0x0001, 0x0003, 0x0007, 0x000F, 0x001F,
|
||||
0x003F, 0x007F, 0x00FF, 0x01FF, 0x03FF, 0x07FF,
|
||||
0x0FFF, 0x1FFF, 0x3FFF, 0x7FFF, 0xFFFF];
|
||||
|
||||
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; // first unused entry
|
||||
var maxcode;
|
||||
|
||||
// block compression parameters -- after all codes are used up,
|
||||
// and compression rate changes, start over.
|
||||
var clear_flg = false;
|
||||
|
||||
// Algorithm: use open addressing double hashing (no chaining) on the
|
||||
// prefix code / next character combination. We do a variant of Knuth's
|
||||
// algorithm D (vol. 3, sec. 6.4) along with G. Knott's relatively-prime
|
||||
// secondary probe. Here, the modular division first probe is gives way
|
||||
// to a faster exclusive-or manipulation. Also do block compression with
|
||||
// an adaptive reset, whereby the code table is cleared when the compression
|
||||
// ratio decreases, but after the table fills. The variable-length output
|
||||
// codes are re-sized at this point, and a special CLEAR code is generated
|
||||
// for the decompressor. Late addition: construct the table according to
|
||||
// file size for noticeable speed improvement on small files. Please direct
|
||||
// questions about this implementation to ames!jaw.
|
||||
var g_init_bits, ClearCode, EOFCode;
|
||||
|
||||
// Add a character to the end of the current packet, and if it is 254
|
||||
// characters, flush the packet to disk.
|
||||
function char_out(c, outs) {
|
||||
accum[a_count++] = c;
|
||||
if (a_count >= 254) flush_char(outs);
|
||||
}
|
||||
|
||||
// Clear out the hash table
|
||||
// table clear for block compress
|
||||
function cl_block(outs) {
|
||||
cl_hash(HSIZE);
|
||||
free_ent = ClearCode + 2;
|
||||
clear_flg = true;
|
||||
output(ClearCode, outs);
|
||||
}
|
||||
|
||||
// Reset code table
|
||||
function cl_hash(hsize) {
|
||||
for (var i = 0; i < hsize; ++i) htab[i] = -1;
|
||||
}
|
||||
|
||||
function compress(init_bits, outs) {
|
||||
var fcode, c, i, ent, disp, hsize_reg, hshift;
|
||||
|
||||
// Set up the globals: g_init_bits - initial number of bits
|
||||
g_init_bits = init_bits;
|
||||
|
||||
// Set up the necessary values
|
||||
clear_flg = false;
|
||||
n_bits = g_init_bits;
|
||||
maxcode = MAXCODE(n_bits);
|
||||
|
||||
ClearCode = 1 << (init_bits - 1);
|
||||
EOFCode = ClearCode + 1;
|
||||
free_ent = ClearCode + 2;
|
||||
|
||||
a_count = 0; // clear packet
|
||||
|
||||
ent = nextPixel();
|
||||
|
||||
hshift = 0;
|
||||
for (fcode = HSIZE; fcode < 65536; fcode *= 2) ++hshift;
|
||||
hshift = 8 - hshift; // set hash code range bound
|
||||
hsize_reg = HSIZE;
|
||||
cl_hash(hsize_reg); // clear hash table
|
||||
|
||||
output(ClearCode, outs);
|
||||
|
||||
outer_loop: while ((c = nextPixel()) != EOF) {
|
||||
fcode = (c << BITS) + ent;
|
||||
i = (c << hshift) ^ ent; // xor hashing
|
||||
if (htab[i] === fcode) {
|
||||
ent = codetab[i];
|
||||
continue;
|
||||
} else if (htab[i] >= 0) { // non-empty slot
|
||||
disp = hsize_reg - i; // secondary hash (after G. Knott)
|
||||
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 << BITS) {
|
||||
codetab[i] = free_ent++; // code -> hashtable
|
||||
htab[i] = fcode;
|
||||
} else {
|
||||
cl_block(outs);
|
||||
}
|
||||
}
|
||||
|
||||
// Put out the final code.
|
||||
output(ent, outs);
|
||||
output(EOFCode, outs);
|
||||
}
|
||||
|
||||
function encode(outs) {
|
||||
outs.writeByte(initCodeSize); // write "initial code size" byte
|
||||
remaining = width * height; // reset navigation variables
|
||||
curPixel = 0;
|
||||
compress(initCodeSize + 1, outs); // compress and write the pixel data
|
||||
outs.writeByte(0); // write block terminator
|
||||
}
|
||||
|
||||
// Flush the packet to disk, and reset the accumulator
|
||||
function flush_char(outs) {
|
||||
if (a_count > 0) {
|
||||
outs.writeByte(a_count);
|
||||
outs.writeBytes(accum, 0, a_count);
|
||||
a_count = 0;
|
||||
}
|
||||
}
|
||||
|
||||
function MAXCODE(n_bits) {
|
||||
return (1 << n_bits) - 1;
|
||||
}
|
||||
|
||||
// Return the next pixel from the image
|
||||
function nextPixel() {
|
||||
if (remaining === 0) return EOF;
|
||||
--remaining;
|
||||
var pix = pixels[curPixel++];
|
||||
return pix & 0xff;
|
||||
}
|
||||
|
||||
function output(code, outs) {
|
||||
cur_accum &= masks[cur_bits];
|
||||
|
||||
if (cur_bits > 0) cur_accum |= (code << cur_bits);
|
||||
else cur_accum = code;
|
||||
|
||||
cur_bits += n_bits;
|
||||
|
||||
while (cur_bits >= 8) {
|
||||
char_out((cur_accum & 0xff), outs);
|
||||
cur_accum >>= 8;
|
||||
cur_bits -= 8;
|
||||
}
|
||||
|
||||
// If the next entry is going to be too big for the code size,
|
||||
// then increase it, if possible.
|
||||
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 << BITS;
|
||||
else maxcode = MAXCODE(n_bits);
|
||||
}
|
||||
}
|
||||
|
||||
if (code == EOFCode) {
|
||||
// At EOF, write the rest of the buffer.
|
||||
while (cur_bits > 0) {
|
||||
char_out((cur_accum & 0xff), outs);
|
||||
cur_accum >>= 8;
|
||||
cur_bits -= 8;
|
||||
}
|
||||
flush_char(outs);
|
||||
}
|
||||
}
|
||||
|
||||
this.encode = encode;
|
||||
}
|
||||
|
||||
module.exports = LZWEncoder;
|
||||
434
node_modules/gif.js/src/NeuQuant.js
generated
vendored
Normal file
|
|
@ -0,0 +1,434 @@
|
|||
/* NeuQuant Neural-Net Quantization Algorithm
|
||||
* ------------------------------------------
|
||||
*
|
||||
* Copyright (c) 1994 Anthony Dekker
|
||||
*
|
||||
* NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994.
|
||||
* See "Kohonen neural networks for optimal colour quantization"
|
||||
* in "Network: Computation in Neural Systems" Vol. 5 (1994) pp 351-367.
|
||||
* for a discussion of the algorithm.
|
||||
* See also http://members.ozemail.com.au/~dekker/NEUQUANT.HTML
|
||||
*
|
||||
* Any party obtaining a copy of these files from the author, directly or
|
||||
* indirectly, is granted, free of charge, a full and unrestricted irrevocable,
|
||||
* world-wide, paid up, royalty-free, nonexclusive right and license to deal
|
||||
* in this software and documentation files (the "Software"), including without
|
||||
* limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
* and/or sell copies of the Software, and to permit persons who receive
|
||||
* copies from any such party to do so, with the only requirement being
|
||||
* that this copyright notice remain intact.
|
||||
*
|
||||
* (JavaScript port 2012 by Johan Nordberg)
|
||||
*/
|
||||
|
||||
function toInt(v) {
|
||||
return ~~v;
|
||||
}
|
||||
|
||||
var ncycles = 100; // number of learning cycles
|
||||
var netsize = 256; // number of colors used
|
||||
var maxnetpos = netsize - 1;
|
||||
|
||||
// defs for freq and bias
|
||||
var netbiasshift = 4; // bias for colour values
|
||||
var intbiasshift = 16; // bias for fractions
|
||||
var intbias = (1 << intbiasshift);
|
||||
var gammashift = 10;
|
||||
var gamma = (1 << gammashift);
|
||||
var betashift = 10;
|
||||
var beta = (intbias >> betashift); /* beta = 1/1024 */
|
||||
var betagamma = (intbias << (gammashift - betashift));
|
||||
|
||||
// defs for decreasing radius factor
|
||||
var initrad = (netsize >> 3); // for 256 cols, radius starts
|
||||
var radiusbiasshift = 6; // at 32.0 biased by 6 bits
|
||||
var radiusbias = (1 << radiusbiasshift);
|
||||
var initradius = (initrad * radiusbias); //and decreases by a
|
||||
var radiusdec = 30; // factor of 1/30 each cycle
|
||||
|
||||
// defs for decreasing alpha factor
|
||||
var alphabiasshift = 10; // alpha starts at 1.0
|
||||
var initalpha = (1 << alphabiasshift);
|
||||
var alphadec; // biased by 10 bits
|
||||
|
||||
/* radbias and alpharadbias used for radpower calculation */
|
||||
var radbiasshift = 8;
|
||||
var radbias = (1 << radbiasshift);
|
||||
var alpharadbshift = (alphabiasshift + radbiasshift);
|
||||
var alpharadbias = (1 << alpharadbshift);
|
||||
|
||||
// four primes near 500 - assume no image has a length so large that it is
|
||||
// divisible by all four primes
|
||||
var prime1 = 499;
|
||||
var prime2 = 491;
|
||||
var prime3 = 487;
|
||||
var prime4 = 503;
|
||||
var minpicturebytes = (3 * prime4);
|
||||
|
||||
/*
|
||||
Constructor: NeuQuant
|
||||
|
||||
Arguments:
|
||||
|
||||
pixels - array of pixels in RGB format
|
||||
samplefac - sampling factor 1 to 30 where lower is better quality
|
||||
|
||||
>
|
||||
> pixels = [r, g, b, r, g, b, r, g, b, ..]
|
||||
>
|
||||
*/
|
||||
function NeuQuant(pixels, samplefac) {
|
||||
var network; // int[netsize][4]
|
||||
var netindex; // for network lookup - really 256
|
||||
|
||||
// bias and freq arrays for learning
|
||||
var bias;
|
||||
var freq;
|
||||
var radpower;
|
||||
|
||||
/*
|
||||
Private Method: init
|
||||
|
||||
sets up arrays
|
||||
*/
|
||||
function init() {
|
||||
network = [];
|
||||
netindex = [];
|
||||
bias = [];
|
||||
freq = [];
|
||||
radpower = [];
|
||||
|
||||
var i, v;
|
||||
for (i = 0; i < netsize; i++) {
|
||||
v = (i << (netbiasshift + 8)) / netsize;
|
||||
network[i] = [v, v, v];
|
||||
freq[i] = intbias / netsize;
|
||||
bias[i] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: unbiasnet
|
||||
|
||||
unbiases network to give byte values 0..255 and record position i to prepare for sort
|
||||
*/
|
||||
function unbiasnet() {
|
||||
for (var i = 0; i < netsize; i++) {
|
||||
network[i][0] >>= netbiasshift;
|
||||
network[i][1] >>= netbiasshift;
|
||||
network[i][2] >>= netbiasshift;
|
||||
network[i][3] = i; // record color number
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: altersingle
|
||||
|
||||
moves neuron *i* towards biased (b,g,r) by factor *alpha*
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: alterneigh
|
||||
|
||||
moves neurons in *radius* around index *i* towards biased (b,g,r) by factor *alpha*
|
||||
*/
|
||||
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 ((j < hi) || (k > lo)) {
|
||||
a = radpower[m++];
|
||||
|
||||
if (j < hi) {
|
||||
p = network[j++];
|
||||
p[0] -= (a * (p[0] - b)) / alpharadbias;
|
||||
p[1] -= (a * (p[1] - g)) / alpharadbias;
|
||||
p[2] -= (a * (p[2] - r)) / alpharadbias;
|
||||
}
|
||||
|
||||
if (k > lo) {
|
||||
p = network[k--];
|
||||
p[0] -= (a * (p[0] - b)) / alpharadbias;
|
||||
p[1] -= (a * (p[1] - g)) / alpharadbias;
|
||||
p[2] -= (a * (p[2] - r)) / alpharadbias;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: contest
|
||||
|
||||
searches for biased BGR values
|
||||
*/
|
||||
function contest(b, g, r) {
|
||||
/*
|
||||
finds closest neuron (min dist) and updates freq
|
||||
finds best neuron (min dist-bias) and returns position
|
||||
for frequently chosen neurons, freq[i] is high and bias[i] is negative
|
||||
bias[i] = gamma * ((1 / netsize) - freq[i])
|
||||
*/
|
||||
|
||||
var bestd = ~(1 << 31);
|
||||
var bestbiasd = bestd;
|
||||
var bestpos = -1;
|
||||
var bestbiaspos = bestpos;
|
||||
|
||||
var i, n, dist, biasdist, betafreq;
|
||||
for (i = 0; i < netsize; i++) {
|
||||
n = network[i];
|
||||
|
||||
dist = Math.abs(n[0] - b) + Math.abs(n[1] - g) + Math.abs(n[2] - r);
|
||||
if (dist < bestd) {
|
||||
bestd = dist;
|
||||
bestpos = i;
|
||||
}
|
||||
|
||||
biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
|
||||
if (biasdist < bestbiasd) {
|
||||
bestbiasd = biasdist;
|
||||
bestbiaspos = i;
|
||||
}
|
||||
|
||||
betafreq = (freq[i] >> betashift);
|
||||
freq[i] -= betafreq;
|
||||
bias[i] += (betafreq << gammashift);
|
||||
}
|
||||
|
||||
freq[bestpos] += beta;
|
||||
bias[bestpos] -= betagamma;
|
||||
|
||||
return bestbiaspos;
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: inxbuild
|
||||
|
||||
sorts network and builds netindex[0..255]
|
||||
*/
|
||||
function inxbuild() {
|
||||
var i, j, p, q, smallpos, smallval, previouscol = 0, startpos = 0;
|
||||
for (i = 0; i < netsize; i++) {
|
||||
p = network[i];
|
||||
smallpos = i;
|
||||
smallval = p[1]; // index on g
|
||||
// find smallest in i..netsize-1
|
||||
for (j = i + 1; j < netsize; j++) {
|
||||
q = network[j];
|
||||
if (q[1] < smallval) { // index on g
|
||||
smallpos = j;
|
||||
smallval = q[1]; // index on g
|
||||
}
|
||||
}
|
||||
q = network[smallpos];
|
||||
// swap p (i) and q (smallpos) entries
|
||||
if (i != smallpos) {
|
||||
j = q[0]; q[0] = p[0]; p[0] = j;
|
||||
j = q[1]; q[1] = p[1]; p[1] = j;
|
||||
j = q[2]; q[2] = p[2]; p[2] = j;
|
||||
j = q[3]; q[3] = p[3]; p[3] = j;
|
||||
}
|
||||
// smallval entry is now in position i
|
||||
|
||||
if (smallval != previouscol) {
|
||||
netindex[previouscol] = (startpos + i) >> 1;
|
||||
for (j = previouscol + 1; j < smallval; j++)
|
||||
netindex[j] = i;
|
||||
previouscol = smallval;
|
||||
startpos = i;
|
||||
}
|
||||
}
|
||||
netindex[previouscol] = (startpos + maxnetpos) >> 1;
|
||||
for (j = previouscol + 1; j < 256; j++)
|
||||
netindex[j] = maxnetpos; // really 256
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: inxsearch
|
||||
|
||||
searches for BGR values 0..255 and returns a color index
|
||||
*/
|
||||
function inxsearch(b, g, r) {
|
||||
var a, p, dist;
|
||||
|
||||
var bestd = 1000; // biggest possible dist is 256*3
|
||||
var best = -1;
|
||||
|
||||
var i = netindex[g]; // index on g
|
||||
var j = i - 1; // start at netindex[g] and work outwards
|
||||
|
||||
while ((i < netsize) || (j >= 0)) {
|
||||
if (i < netsize) {
|
||||
p = network[i];
|
||||
dist = p[1] - g; // inx key
|
||||
if (dist >= bestd) i = netsize; // stop iter
|
||||
else {
|
||||
i++;
|
||||
if (dist < 0) dist = -dist;
|
||||
a = p[0] - b; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
a = p[2] - r; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
bestd = dist;
|
||||
best = p[3];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (j >= 0) {
|
||||
p = network[j];
|
||||
dist = g - p[1]; // inx key - reverse dif
|
||||
if (dist >= bestd) j = -1; // stop iter
|
||||
else {
|
||||
j--;
|
||||
if (dist < 0) dist = -dist;
|
||||
a = p[0] - b; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
a = p[2] - r; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
bestd = dist;
|
||||
best = p[3];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return best;
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: learn
|
||||
|
||||
"Main Learning Loop"
|
||||
*/
|
||||
function learn() {
|
||||
var i;
|
||||
|
||||
var lengthcount = pixels.length;
|
||||
var alphadec = toInt(30 + ((samplefac - 1) / 3));
|
||||
var samplepixels = toInt(lengthcount / (3 * samplefac));
|
||||
var delta = toInt(samplepixels / ncycles);
|
||||
var alpha = initalpha;
|
||||
var radius = initradius;
|
||||
|
||||
var rad = radius >> radiusbiasshift;
|
||||
|
||||
if (rad <= 1) rad = 0;
|
||||
for (i = 0; i < rad; i++)
|
||||
radpower[i] = toInt(alpha * (((rad * rad - i * i) * radbias) / (rad * rad)));
|
||||
|
||||
var step;
|
||||
if (lengthcount < minpicturebytes) {
|
||||
samplefac = 1;
|
||||
step = 3;
|
||||
} else if ((lengthcount % prime1) !== 0) {
|
||||
step = 3 * prime1;
|
||||
} else if ((lengthcount % prime2) !== 0) {
|
||||
step = 3 * prime2;
|
||||
} else if ((lengthcount % prime3) !== 0) {
|
||||
step = 3 * prime3;
|
||||
} else {
|
||||
step = 3 * prime4;
|
||||
}
|
||||
|
||||
var b, g, r, j;
|
||||
var pix = 0; // current pixel
|
||||
|
||||
i = 0;
|
||||
while (i < samplepixels) {
|
||||
b = (pixels[pix] & 0xff) << netbiasshift;
|
||||
g = (pixels[pix + 1] & 0xff) << netbiasshift;
|
||||
r = (pixels[pix + 2] & 0xff) << netbiasshift;
|
||||
|
||||
j = contest(b, g, r);
|
||||
|
||||
altersingle(alpha, j, b, g, r);
|
||||
if (rad !== 0) alterneigh(rad, j, b, g, r); // alter neighbours
|
||||
|
||||
pix += step;
|
||||
if (pix >= 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 < rad; j++)
|
||||
radpower[j] = toInt(alpha * (((rad * rad - j * j) * radbias) / (rad * rad)));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Method: buildColormap
|
||||
|
||||
1. initializes network
|
||||
2. trains it
|
||||
3. removes misconceptions
|
||||
4. builds colorindex
|
||||
*/
|
||||
function buildColormap() {
|
||||
init();
|
||||
learn();
|
||||
unbiasnet();
|
||||
inxbuild();
|
||||
}
|
||||
this.buildColormap = buildColormap;
|
||||
|
||||
/*
|
||||
Method: getColormap
|
||||
|
||||
builds colormap from the index
|
||||
|
||||
returns array in the format:
|
||||
|
||||
>
|
||||
> [r, g, b, r, g, b, r, g, b, ..]
|
||||
>
|
||||
*/
|
||||
function getColormap() {
|
||||
var map = [];
|
||||
var index = [];
|
||||
|
||||
for (var i = 0; i < netsize; i++)
|
||||
index[network[i][3]] = i;
|
||||
|
||||
var k = 0;
|
||||
for (var l = 0; l < netsize; l++) {
|
||||
var j = index[l];
|
||||
map[k++] = (network[j][0]);
|
||||
map[k++] = (network[j][1]);
|
||||
map[k++] = (network[j][2]);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
this.getColormap = getColormap;
|
||||
|
||||
/*
|
||||
Method: lookupRGB
|
||||
|
||||
looks for the closest *r*, *g*, *b* color in the map and
|
||||
returns its index
|
||||
*/
|
||||
this.lookupRGB = inxsearch;
|
||||
}
|
||||
|
||||
module.exports = NeuQuant;
|
||||
431
node_modules/gif.js/src/TypedNeuQuant.js
generated
vendored
Normal file
|
|
@ -0,0 +1,431 @@
|
|||
/* NeuQuant Neural-Net Quantization Algorithm
|
||||
* ------------------------------------------
|
||||
*
|
||||
* Copyright (c) 1994 Anthony Dekker
|
||||
*
|
||||
* NEUQUANT Neural-Net quantization algorithm by Anthony Dekker, 1994.
|
||||
* See "Kohonen neural networks for optimal colour quantization"
|
||||
* in "Network: Computation in Neural Systems" Vol. 5 (1994) pp 351-367.
|
||||
* for a discussion of the algorithm.
|
||||
* See also http://members.ozemail.com.au/~dekker/NEUQUANT.HTML
|
||||
*
|
||||
* Any party obtaining a copy of these files from the author, directly or
|
||||
* indirectly, is granted, free of charge, a full and unrestricted irrevocable,
|
||||
* world-wide, paid up, royalty-free, nonexclusive right and license to deal
|
||||
* in this software and documentation files (the "Software"), including without
|
||||
* limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
|
||||
* and/or sell copies of the Software, and to permit persons who receive
|
||||
* copies from any such party to do so, with the only requirement being
|
||||
* that this copyright notice remain intact.
|
||||
*
|
||||
* (JavaScript port 2012 by Johan Nordberg)
|
||||
*/
|
||||
|
||||
var ncycles = 100; // number of learning cycles
|
||||
var netsize = 256; // number of colors used
|
||||
var maxnetpos = netsize - 1;
|
||||
|
||||
// defs for freq and bias
|
||||
var netbiasshift = 4; // bias for colour values
|
||||
var intbiasshift = 16; // bias for fractions
|
||||
var intbias = (1 << intbiasshift);
|
||||
var gammashift = 10;
|
||||
var gamma = (1 << gammashift);
|
||||
var betashift = 10;
|
||||
var beta = (intbias >> betashift); /* beta = 1/1024 */
|
||||
var betagamma = (intbias << (gammashift - betashift));
|
||||
|
||||
// defs for decreasing radius factor
|
||||
var initrad = (netsize >> 3); // for 256 cols, radius starts
|
||||
var radiusbiasshift = 6; // at 32.0 biased by 6 bits
|
||||
var radiusbias = (1 << radiusbiasshift);
|
||||
var initradius = (initrad * radiusbias); //and decreases by a
|
||||
var radiusdec = 30; // factor of 1/30 each cycle
|
||||
|
||||
// defs for decreasing alpha factor
|
||||
var alphabiasshift = 10; // alpha starts at 1.0
|
||||
var initalpha = (1 << alphabiasshift);
|
||||
var alphadec; // biased by 10 bits
|
||||
|
||||
/* radbias and alpharadbias used for radpower calculation */
|
||||
var radbiasshift = 8;
|
||||
var radbias = (1 << radbiasshift);
|
||||
var alpharadbshift = (alphabiasshift + radbiasshift);
|
||||
var alpharadbias = (1 << alpharadbshift);
|
||||
|
||||
// four primes near 500 - assume no image has a length so large that it is
|
||||
// divisible by all four primes
|
||||
var prime1 = 499;
|
||||
var prime2 = 491;
|
||||
var prime3 = 487;
|
||||
var prime4 = 503;
|
||||
var minpicturebytes = (3 * prime4);
|
||||
|
||||
/*
|
||||
Constructor: NeuQuant
|
||||
|
||||
Arguments:
|
||||
|
||||
pixels - array of pixels in RGB format
|
||||
samplefac - sampling factor 1 to 30 where lower is better quality
|
||||
|
||||
>
|
||||
> pixels = [r, g, b, r, g, b, r, g, b, ..]
|
||||
>
|
||||
*/
|
||||
function NeuQuant(pixels, samplefac) {
|
||||
var network; // int[netsize][4]
|
||||
var netindex; // for network lookup - really 256
|
||||
|
||||
// bias and freq arrays for learning
|
||||
var bias;
|
||||
var freq;
|
||||
var radpower;
|
||||
|
||||
/*
|
||||
Private Method: init
|
||||
|
||||
sets up arrays
|
||||
*/
|
||||
function init() {
|
||||
network = [];
|
||||
netindex = new Int32Array(256);
|
||||
bias = new Int32Array(netsize);
|
||||
freq = new Int32Array(netsize);
|
||||
radpower = new Int32Array(netsize >> 3);
|
||||
|
||||
var i, v;
|
||||
for (i = 0; i < netsize; i++) {
|
||||
v = (i << (netbiasshift + 8)) / netsize;
|
||||
network[i] = new Float64Array([v, v, v, 0]);
|
||||
//network[i] = [v, v, v, 0]
|
||||
freq[i] = intbias / netsize;
|
||||
bias[i] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: unbiasnet
|
||||
|
||||
unbiases network to give byte values 0..255 and record position i to prepare for sort
|
||||
*/
|
||||
function unbiasnet() {
|
||||
for (var i = 0; i < netsize; i++) {
|
||||
network[i][0] >>= netbiasshift;
|
||||
network[i][1] >>= netbiasshift;
|
||||
network[i][2] >>= netbiasshift;
|
||||
network[i][3] = i; // record color number
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: altersingle
|
||||
|
||||
moves neuron *i* towards biased (b,g,r) by factor *alpha*
|
||||
*/
|
||||
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;
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: alterneigh
|
||||
|
||||
moves neurons in *radius* around index *i* towards biased (b,g,r) by factor *alpha*
|
||||
*/
|
||||
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 ((j < hi) || (k > lo)) {
|
||||
a = radpower[m++];
|
||||
|
||||
if (j < hi) {
|
||||
p = network[j++];
|
||||
p[0] -= (a * (p[0] - b)) / alpharadbias;
|
||||
p[1] -= (a * (p[1] - g)) / alpharadbias;
|
||||
p[2] -= (a * (p[2] - r)) / alpharadbias;
|
||||
}
|
||||
|
||||
if (k > lo) {
|
||||
p = network[k--];
|
||||
p[0] -= (a * (p[0] - b)) / alpharadbias;
|
||||
p[1] -= (a * (p[1] - g)) / alpharadbias;
|
||||
p[2] -= (a * (p[2] - r)) / alpharadbias;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: contest
|
||||
|
||||
searches for biased BGR values
|
||||
*/
|
||||
function contest(b, g, r) {
|
||||
/*
|
||||
finds closest neuron (min dist) and updates freq
|
||||
finds best neuron (min dist-bias) and returns position
|
||||
for frequently chosen neurons, freq[i] is high and bias[i] is negative
|
||||
bias[i] = gamma * ((1 / netsize) - freq[i])
|
||||
*/
|
||||
|
||||
var bestd = ~(1 << 31);
|
||||
var bestbiasd = bestd;
|
||||
var bestpos = -1;
|
||||
var bestbiaspos = bestpos;
|
||||
|
||||
var i, n, dist, biasdist, betafreq;
|
||||
for (i = 0; i < netsize; i++) {
|
||||
n = network[i];
|
||||
|
||||
dist = Math.abs(n[0] - b) + Math.abs(n[1] - g) + Math.abs(n[2] - r);
|
||||
if (dist < bestd) {
|
||||
bestd = dist;
|
||||
bestpos = i;
|
||||
}
|
||||
|
||||
biasdist = dist - ((bias[i]) >> (intbiasshift - netbiasshift));
|
||||
if (biasdist < bestbiasd) {
|
||||
bestbiasd = biasdist;
|
||||
bestbiaspos = i;
|
||||
}
|
||||
|
||||
betafreq = (freq[i] >> betashift);
|
||||
freq[i] -= betafreq;
|
||||
bias[i] += (betafreq << gammashift);
|
||||
}
|
||||
|
||||
freq[bestpos] += beta;
|
||||
bias[bestpos] -= betagamma;
|
||||
|
||||
return bestbiaspos;
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: inxbuild
|
||||
|
||||
sorts network and builds netindex[0..255]
|
||||
*/
|
||||
function inxbuild() {
|
||||
var i, j, p, q, smallpos, smallval, previouscol = 0, startpos = 0;
|
||||
for (i = 0; i < netsize; i++) {
|
||||
p = network[i];
|
||||
smallpos = i;
|
||||
smallval = p[1]; // index on g
|
||||
// find smallest in i..netsize-1
|
||||
for (j = i + 1; j < netsize; j++) {
|
||||
q = network[j];
|
||||
if (q[1] < smallval) { // index on g
|
||||
smallpos = j;
|
||||
smallval = q[1]; // index on g
|
||||
}
|
||||
}
|
||||
q = network[smallpos];
|
||||
// swap p (i) and q (smallpos) entries
|
||||
if (i != smallpos) {
|
||||
j = q[0]; q[0] = p[0]; p[0] = j;
|
||||
j = q[1]; q[1] = p[1]; p[1] = j;
|
||||
j = q[2]; q[2] = p[2]; p[2] = j;
|
||||
j = q[3]; q[3] = p[3]; p[3] = j;
|
||||
}
|
||||
// smallval entry is now in position i
|
||||
|
||||
if (smallval != previouscol) {
|
||||
netindex[previouscol] = (startpos + i) >> 1;
|
||||
for (j = previouscol + 1; j < smallval; j++)
|
||||
netindex[j] = i;
|
||||
previouscol = smallval;
|
||||
startpos = i;
|
||||
}
|
||||
}
|
||||
netindex[previouscol] = (startpos + maxnetpos) >> 1;
|
||||
for (j = previouscol + 1; j < 256; j++)
|
||||
netindex[j] = maxnetpos; // really 256
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: inxsearch
|
||||
|
||||
searches for BGR values 0..255 and returns a color index
|
||||
*/
|
||||
function inxsearch(b, g, r) {
|
||||
var a, p, dist;
|
||||
|
||||
var bestd = 1000; // biggest possible dist is 256*3
|
||||
var best = -1;
|
||||
|
||||
var i = netindex[g]; // index on g
|
||||
var j = i - 1; // start at netindex[g] and work outwards
|
||||
|
||||
while ((i < netsize) || (j >= 0)) {
|
||||
if (i < netsize) {
|
||||
p = network[i];
|
||||
dist = p[1] - g; // inx key
|
||||
if (dist >= bestd) i = netsize; // stop iter
|
||||
else {
|
||||
i++;
|
||||
if (dist < 0) dist = -dist;
|
||||
a = p[0] - b; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
a = p[2] - r; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
bestd = dist;
|
||||
best = p[3];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (j >= 0) {
|
||||
p = network[j];
|
||||
dist = g - p[1]; // inx key - reverse dif
|
||||
if (dist >= bestd) j = -1; // stop iter
|
||||
else {
|
||||
j--;
|
||||
if (dist < 0) dist = -dist;
|
||||
a = p[0] - b; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
a = p[2] - r; if (a < 0) a = -a;
|
||||
dist += a;
|
||||
if (dist < bestd) {
|
||||
bestd = dist;
|
||||
best = p[3];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return best;
|
||||
}
|
||||
|
||||
/*
|
||||
Private Method: learn
|
||||
|
||||
"Main Learning Loop"
|
||||
*/
|
||||
function learn() {
|
||||
var i;
|
||||
|
||||
var lengthcount = pixels.length;
|
||||
var alphadec = 30 + ((samplefac - 1) / 3);
|
||||
var samplepixels = lengthcount / (3 * samplefac);
|
||||
var delta = ~~(samplepixels / ncycles);
|
||||
var alpha = initalpha;
|
||||
var radius = initradius;
|
||||
|
||||
var rad = radius >> radiusbiasshift;
|
||||
|
||||
if (rad <= 1) rad = 0;
|
||||
for (i = 0; i < rad; i++)
|
||||
radpower[i] = alpha * (((rad * rad - i * i) * radbias) / (rad * rad));
|
||||
|
||||
var step;
|
||||
if (lengthcount < minpicturebytes) {
|
||||
samplefac = 1;
|
||||
step = 3;
|
||||
} else if ((lengthcount % prime1) !== 0) {
|
||||
step = 3 * prime1;
|
||||
} else if ((lengthcount % prime2) !== 0) {
|
||||
step = 3 * prime2;
|
||||
} else if ((lengthcount % prime3) !== 0) {
|
||||
step = 3 * prime3;
|
||||
} else {
|
||||
step = 3 * prime4;
|
||||
}
|
||||
|
||||
var b, g, r, j;
|
||||
var pix = 0; // current pixel
|
||||
|
||||
i = 0;
|
||||
while (i < samplepixels) {
|
||||
b = (pixels[pix] & 0xff) << netbiasshift;
|
||||
g = (pixels[pix + 1] & 0xff) << netbiasshift;
|
||||
r = (pixels[pix + 2] & 0xff) << netbiasshift;
|
||||
|
||||
j = contest(b, g, r);
|
||||
|
||||
altersingle(alpha, j, b, g, r);
|
||||
if (rad !== 0) alterneigh(rad, j, b, g, r); // alter neighbours
|
||||
|
||||
pix += step;
|
||||
if (pix >= 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 < rad; j++)
|
||||
radpower[j] = alpha * (((rad * rad - j * j) * radbias) / (rad * rad));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Method: buildColormap
|
||||
|
||||
1. initializes network
|
||||
2. trains it
|
||||
3. removes misconceptions
|
||||
4. builds colorindex
|
||||
*/
|
||||
function buildColormap() {
|
||||
init();
|
||||
learn();
|
||||
unbiasnet();
|
||||
inxbuild();
|
||||
}
|
||||
this.buildColormap = buildColormap;
|
||||
|
||||
/*
|
||||
Method: getColormap
|
||||
|
||||
builds colormap from the index
|
||||
|
||||
returns array in the format:
|
||||
|
||||
>
|
||||
> [r, g, b, r, g, b, r, g, b, ..]
|
||||
>
|
||||
*/
|
||||
function getColormap() {
|
||||
var map = [];
|
||||
var index = [];
|
||||
|
||||
for (var i = 0; i < netsize; i++)
|
||||
index[network[i][3]] = i;
|
||||
|
||||
var k = 0;
|
||||
for (var l = 0; l < netsize; l++) {
|
||||
var j = index[l];
|
||||
map[k++] = (network[j][0]);
|
||||
map[k++] = (network[j][1]);
|
||||
map[k++] = (network[j][2]);
|
||||
}
|
||||
return map;
|
||||
}
|
||||
this.getColormap = getColormap;
|
||||
|
||||
/*
|
||||
Method: lookupRGB
|
||||
|
||||
looks for the closest *r*, *g*, *b* color in the map and
|
||||
returns its index
|
||||
*/
|
||||
this.lookupRGB = inxsearch;
|
||||
}
|
||||
|
||||
module.exports = NeuQuant;
|
||||
92
node_modules/gif.js/src/benchmark.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
{NeuQuant} = require './TypedNeuQuant.js'
|
||||
|
||||
###
|
||||
typed 100 runs:
|
||||
run finished at q1
|
||||
avg: 661.46ms median: 660.54ms
|
||||
run finished at q10
|
||||
avg: 67.49ms median: 67.03ms
|
||||
run finished at q20
|
||||
avg: 34.56ms median: 34.19ms
|
||||
normal 100 runs:
|
||||
run finished at q1
|
||||
avg: 888.10ms median: 887.63ms
|
||||
run finished at q10
|
||||
avg: 92.85ms median: 91.99ms
|
||||
run finished at q20
|
||||
avg: 46.14ms median: 45.68ms
|
||||
###
|
||||
|
||||
quality = 10 # pixel sample interval, 1 being the best quality
|
||||
runs = 100
|
||||
|
||||
if window.performance?.now?
|
||||
now = -> window.performance.now()
|
||||
else
|
||||
now = Date.now
|
||||
|
||||
window.addEventListener 'load', ->
|
||||
img = document.getElementById 'image'
|
||||
canvas = document.getElementById 'canvas'
|
||||
|
||||
w = canvas.width = img.width
|
||||
h = canvas.height = img.height
|
||||
|
||||
ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(img, 0, 0)
|
||||
|
||||
imdata = ctx.getImageData(0, 0, img.width, img.height)
|
||||
rgba = imdata.data
|
||||
|
||||
rgb = new Uint8Array w * h * 3
|
||||
#rgb = new Array w * h * 3
|
||||
|
||||
rgb_idx = 0
|
||||
for i in [0...rgba.length] by 4
|
||||
rgb[rgb_idx++] = rgba[i + 0]
|
||||
rgb[rgb_idx++] = rgba[i + 1]
|
||||
rgb[rgb_idx++] = rgba[i + 2]
|
||||
|
||||
runtimes = []
|
||||
for run in [0...runs]
|
||||
start = now()
|
||||
imgq = new NeuQuant rgb, quality
|
||||
imgq.buildColormap()
|
||||
end = now()
|
||||
delta = end - start
|
||||
runtimes.push delta
|
||||
|
||||
console.log runtimes.join('\n')
|
||||
|
||||
map = imgq.getColormap()
|
||||
avg = runtimes.reduce((p, n) -> p + n) / runtimes.length
|
||||
median = runtimes.sort()[Math.floor(runs / 2)]
|
||||
console.log """
|
||||
run finished at q#{ quality }
|
||||
avg: #{ avg.toFixed(2) }ms median: #{ median.toFixed(2) }ms
|
||||
"""
|
||||
|
||||
for y in [0...h]
|
||||
for x in [0...w]
|
||||
idx = (y * w + x) * 4
|
||||
|
||||
r = rgba[idx + 0]
|
||||
g = rgba[idx + 1]
|
||||
b = rgba[idx + 2]
|
||||
|
||||
map_idx = imgq.lookupRGB(r, g, b) * 3
|
||||
|
||||
rgba[idx + 0] = map[map_idx]
|
||||
rgba[idx + 1] = map[map_idx + 1]
|
||||
rgba[idx + 2] = map[map_idx + 2]
|
||||
|
||||
ctx.putImageData imdata, 0, 0
|
||||
|
||||
for i in [0...map.length] by 3
|
||||
color = [map[i], map[i + 1], map[i + 2]]
|
||||
el = document.createElement 'span'
|
||||
el.style.display = 'inline-block'
|
||||
el.style.height = '1em'
|
||||
el.style.width = '1em'
|
||||
el.style.background = 'rgb(' + color.join(',') + ')'
|
||||
document.body.appendChild el
|
||||
19
node_modules/gif.js/src/browser.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
### CoffeeScript version of the browser detection from MooTools ###
|
||||
|
||||
ua = navigator.userAgent.toLowerCase()
|
||||
platform = navigator.platform.toLowerCase()
|
||||
UA = ua.match(/(opera|ie|firefox|chrome|version)[\s\/:]([\w\d\.]+)?.*?(safari|version[\s\/:]([\w\d\.]+)|$)/) or [null, 'unknown', 0]
|
||||
mode = UA[1] == 'ie' && document.documentMode
|
||||
|
||||
browser =
|
||||
name: if UA[1] is 'version' then UA[3] else UA[1]
|
||||
version: mode or parseFloat(if UA[1] is 'opera' && UA[4] then UA[4] else UA[2])
|
||||
|
||||
platform:
|
||||
name: if ua.match(/ip(?:ad|od|hone)/) then 'ios' else (ua.match(/(?:webos|android)/) or platform.match(/mac|win|linux/) or ['other'])[0]
|
||||
|
||||
browser[browser.name] = true
|
||||
browser[browser.name + parseInt(browser.version, 10)] = true
|
||||
browser.platform[browser.platform.name] = true
|
||||
|
||||
module.exports = browser
|
||||
209
node_modules/gif.js/src/gif.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
{EventEmitter} = require 'events'
|
||||
browser = require './browser.coffee'
|
||||
|
||||
class GIF extends EventEmitter
|
||||
|
||||
defaults =
|
||||
workerScript: 'gif.worker.js'
|
||||
workers: 2
|
||||
repeat: 0 # repeat forever, -1 = repeat once
|
||||
background: '#fff'
|
||||
quality: 10 # pixel sample interval, lower is better
|
||||
width: null # size derermined from first frame if possible
|
||||
height: null
|
||||
transparent: null
|
||||
debug: false
|
||||
dither: false # see GIFEncoder.js for dithering options
|
||||
|
||||
frameDefaults =
|
||||
delay: 500 # ms
|
||||
copy: false
|
||||
|
||||
constructor: (options) ->
|
||||
@running = false
|
||||
|
||||
@options = {}
|
||||
@frames = []
|
||||
|
||||
@freeWorkers = []
|
||||
@activeWorkers = []
|
||||
|
||||
@setOptions options
|
||||
for key, value of defaults
|
||||
@options[key] ?= value
|
||||
|
||||
setOption: (key, value) ->
|
||||
@options[key] = value
|
||||
if @_canvas? and key in ['width', 'height']
|
||||
@_canvas[key] = value
|
||||
|
||||
setOptions: (options) ->
|
||||
@setOption key, value for own key, value of options
|
||||
|
||||
addFrame: (image, options={}) ->
|
||||
frame = {}
|
||||
frame.transparent = @options.transparent
|
||||
for key of frameDefaults
|
||||
frame[key] = options[key] or frameDefaults[key]
|
||||
|
||||
# use the images width and height for options unless already set
|
||||
@setOption 'width', image.width unless @options.width?
|
||||
@setOption 'height', image.height unless @options.height?
|
||||
|
||||
if ImageData? and image instanceof ImageData
|
||||
frame.data = image.data
|
||||
else if (CanvasRenderingContext2D? and image instanceof CanvasRenderingContext2D) or (WebGLRenderingContext? and image instanceof WebGLRenderingContext)
|
||||
if options.copy
|
||||
frame.data = @getContextData image
|
||||
else
|
||||
frame.context = image
|
||||
else if image.childNodes?
|
||||
if options.copy
|
||||
frame.data = @getImageData image
|
||||
else
|
||||
frame.image = image
|
||||
else
|
||||
throw new Error 'Invalid image'
|
||||
|
||||
@frames.push frame
|
||||
|
||||
render: ->
|
||||
throw new Error 'Already running' if @running
|
||||
|
||||
if not @options.width? or not @options.height?
|
||||
throw new Error 'Width and height must be set prior to rendering'
|
||||
|
||||
@running = true
|
||||
@nextFrame = 0
|
||||
@finishedFrames = 0
|
||||
|
||||
@imageParts = (null for i in [0...@frames.length])
|
||||
numWorkers = @spawnWorkers()
|
||||
# we need to wait for the palette
|
||||
if @options.globalPalette == true
|
||||
@renderNextFrame()
|
||||
else
|
||||
@renderNextFrame() for i in [0...numWorkers]
|
||||
|
||||
@emit 'start'
|
||||
@emit 'progress', 0
|
||||
|
||||
abort: ->
|
||||
loop
|
||||
worker = @activeWorkers.shift()
|
||||
break unless worker?
|
||||
@log 'killing active worker'
|
||||
worker.terminate()
|
||||
@running = false
|
||||
@emit 'abort'
|
||||
|
||||
# private
|
||||
|
||||
spawnWorkers: ->
|
||||
numWorkers = Math.min(@options.workers, @frames.length)
|
||||
[@freeWorkers.length...numWorkers].forEach (i) =>
|
||||
@log "spawning worker #{ i }"
|
||||
worker = new Worker @options.workerScript
|
||||
worker.onmessage = (event) =>
|
||||
@activeWorkers.splice @activeWorkers.indexOf(worker), 1
|
||||
@freeWorkers.push worker
|
||||
@frameFinished event.data
|
||||
@freeWorkers.push worker
|
||||
return numWorkers
|
||||
|
||||
frameFinished: (frame) ->
|
||||
@log "frame #{ frame.index } finished - #{ @activeWorkers.length } active"
|
||||
@finishedFrames++
|
||||
@emit 'progress', @finishedFrames / @frames.length
|
||||
@imageParts[frame.index] = frame
|
||||
# remember calculated palette, spawn the rest of the workers
|
||||
if @options.globalPalette == true
|
||||
@options.globalPalette = frame.globalPalette
|
||||
@log 'global palette analyzed'
|
||||
@renderNextFrame() for i in [1...@freeWorkers.length] if @frames.length > 2
|
||||
if null in @imageParts
|
||||
@renderNextFrame()
|
||||
else
|
||||
@finishRendering()
|
||||
|
||||
finishRendering: ->
|
||||
len = 0
|
||||
for frame in @imageParts
|
||||
len += (frame.data.length - 1) * frame.pageSize + frame.cursor
|
||||
len += frame.pageSize - frame.cursor
|
||||
@log "rendering finished - filesize #{ Math.round(len / 1000) }kb"
|
||||
data = new Uint8Array len
|
||||
offset = 0
|
||||
for frame in @imageParts
|
||||
for page, i in frame.data
|
||||
data.set page, offset
|
||||
if i is frame.data.length - 1
|
||||
offset += frame.cursor
|
||||
else
|
||||
offset += frame.pageSize
|
||||
|
||||
image = new Blob [data],
|
||||
type: 'image/gif'
|
||||
|
||||
@emit 'finished', image, data
|
||||
|
||||
renderNextFrame: ->
|
||||
throw new Error 'No free workers' if @freeWorkers.length is 0
|
||||
return if @nextFrame >= @frames.length # no new frame to render
|
||||
|
||||
frame = @frames[@nextFrame++]
|
||||
worker = @freeWorkers.shift()
|
||||
task = @getTask frame
|
||||
|
||||
@log "starting frame #{ task.index + 1 } of #{ @frames.length }"
|
||||
@activeWorkers.push worker
|
||||
worker.postMessage task#, [task.data.buffer]
|
||||
|
||||
getContextData: (ctx) ->
|
||||
return ctx.getImageData(0, 0, @options.width, @options.height).data
|
||||
|
||||
getImageData: (image) ->
|
||||
if not @_canvas?
|
||||
@_canvas = document.createElement 'canvas'
|
||||
@_canvas.width = @options.width
|
||||
@_canvas.height = @options.height
|
||||
|
||||
ctx = @_canvas.getContext '2d'
|
||||
ctx.setFill = @options.background
|
||||
ctx.fillRect 0, 0, @options.width, @options.height
|
||||
ctx.drawImage image, 0, 0
|
||||
|
||||
return @getContextData ctx
|
||||
|
||||
getTask: (frame) ->
|
||||
index = @frames.indexOf frame
|
||||
task =
|
||||
index: index
|
||||
last: index is (@frames.length - 1)
|
||||
delay: frame.delay
|
||||
transparent: frame.transparent
|
||||
width: @options.width
|
||||
height: @options.height
|
||||
quality: @options.quality
|
||||
dither: @options.dither
|
||||
globalPalette: @options.globalPalette
|
||||
repeat: @options.repeat
|
||||
canTransfer: (browser.name is 'chrome')
|
||||
|
||||
if frame.data?
|
||||
task.data = frame.data
|
||||
else if frame.context?
|
||||
task.data = @getContextData frame.context
|
||||
else if frame.image?
|
||||
task.data = @getImageData frame.image
|
||||
else
|
||||
throw new Error 'Invalid frame'
|
||||
|
||||
return task
|
||||
|
||||
log: (args...) ->
|
||||
return unless @options.debug
|
||||
console.log args...
|
||||
|
||||
|
||||
module.exports = GIF
|
||||
33
node_modules/gif.js/src/gif.worker.coffee
generated
vendored
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
GIFEncoder = require './GIFEncoder.js'
|
||||
|
||||
renderFrame = (frame) ->
|
||||
encoder = new GIFEncoder frame.width, frame.height
|
||||
|
||||
if frame.index is 0
|
||||
encoder.writeHeader()
|
||||
else
|
||||
encoder.firstFrame = false
|
||||
|
||||
encoder.setTransparent frame.transparent
|
||||
encoder.setRepeat frame.repeat
|
||||
encoder.setDelay frame.delay
|
||||
encoder.setQuality frame.quality
|
||||
encoder.setDither frame.dither
|
||||
encoder.setGlobalPalette frame.globalPalette
|
||||
encoder.addFrame frame.data
|
||||
encoder.finish() if frame.last
|
||||
if frame.globalPalette == true
|
||||
frame.globalPalette = encoder.getGlobalPalette()
|
||||
|
||||
stream = encoder.stream()
|
||||
frame.data = stream.pages
|
||||
frame.cursor = stream.cursor
|
||||
frame.pageSize = stream.constructor.pageSize
|
||||
|
||||
if frame.canTransfer
|
||||
transfer = (page.buffer for page in frame.data)
|
||||
self.postMessage frame, transfer
|
||||
else
|
||||
self.postMessage frame
|
||||
|
||||
self.onmessage = (event) -> renderFrame event.data
|
||||