jnordberg · cuixiping · Aug 3, 2020 · Aug 6, 2020
diff --git a/README.md b/README.md
@@ -52,6 +52,7 @@ Options can be passed to the constructor or using the `setOptions` method.
 | height       | `null`          | output image height                                |
 | transparent  | `null`          | transparent hex color, `0x00FF00` = green          |
 | dither       | `false`         | dithering method, e.g. `FloydSteinberg-serpentine` |
+| globalPalette| `false`         | global palette for all frames                      |
8000| debug        | `false`         | whether to print debug information to console      |
 
 If width or height is `null` image size will be deteremined by first frame added.
@@ -63,6 +64,8 @@ Available dithering methods are:
  * `Stucki`
  * `Atkinson`
 
+`globalPalette` can be `true`, `false`, or an array of [r,g,b,r,g,b,...]. If `globalPalette` is `true` the global palette will be created from the first frame.
+
 You can add `-serpentine` to use serpentine scanning, e.g. `Stucki-serpentine`.
 
 ### addFrame options
@@ -72,6 +75,14 @@ You can add `-serpentine` to use serpentine scanning, e.g. `Stucki-serpentine`.
 | delay        | `500`           | frame delay                                        |
 | copy         | `false`         | copy the pixel data                                |
 | dispose      | `-1`            | frame disposal code. See [GIF89a Spec][gif89aspec] |
+| localPalette | `false`         | local palette. true, false or rgb array            |
+| left         | 0               | frame image position left                          |
+| top          | 0               | frame image position top                           |
+| width        | `null`          | frame image width                                  |
+| height       | `null`          | frame image height                                 |
+| transparent  | ?               | transparent                                        |
+
+`localPalette` can be `true`, `false`, or an array of [r,g,b,r,g,b,...]. If `localPalette` is `true` the local palette will be created from the frame image.
 
 [gif89aspec]: https://www.w3.org/Graphics/GIF/spec-gif89a.txt
 

diff --git a/dist/gif.js b/dist/gif.js
diff --git a/dist/gif.js.map b/dist/gif.js.map
diff --git a/dist/gif.worker.js b/dist/gif.worker.js
diff --git a/dist/gif.worker.js.map b/dist/gif.worker.js.map
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "uglify-js": "^2.7.5"
   },
   "scripts": {
+    "coffee": "coffee -c src/gif.coffee src/gif.worker.coffee",
     "prepublish": "./bin/build"
   },
   "browser": "./dist/gif.js",

diff --git a/src/GIFEncoder.js b/src/GIFEncoder.js
@@ -56,6 +56,9 @@ function GIFEncoder(width, height) {
   // image size
   this.width = ~~width;
   this.height = ~~height;
+  // image position
+  this.left = 0;
+  this.top = 0;
 
   // transparent color if given
   this.transparent = null;
@@ -82,6 +85,7 @@ function GIFEncoder(width, height) {
   this.sample = 10; // default sample interval for quantizer
   this.dither = false; // default dithering
   this.globalPalette = false;
+  this.localPalette = false;
 
   this.out = new ByteArray();
 }
@@ -137,33 +141,55 @@ GIFEncoder.prototype.setTransparent = function(color) {
   this.transparent = color;
 };
 
+/*
+  Sets left and top
+*/
+GIFEncoder.prototype.setPosition = function(left, top) {
+  this.left = ~~left || 0;
+  this.top = ~~top || 0;
+};
+
+/*
+  Sets local color table
+*/
+GIFEncoder.prototype.setLocalPalette = function(colorTab) {
+  this.localPalette = colorTab || false;
+};
+
 /*
   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, frameOptions) {
   this.image = imageData;
-
-  this.colorTab = this.globalPalette && this.globalPalette.slice ? this.globalPalette : null;
+  this.colorTab = null;
+  if (this.localPalette && this.localPalette.slice) {
+    this.colorTab = this.localPalette;
+  } else if (this.localPalette !== true) {
+    this.localPalette = false;
+    this.colorTab = this.globalPalette && this.globalPalette.slice ? this.globalPalette : null;
+  }
+  // localPalette possible value: true, false, array
 
   this.getImagePixels(); // convert to correct format if necessary
   this.analyzePixels(); // build color table & map pixels
 
-  if (this.globalPalette === true) this.globalPalette = this.colorTab;
+  // global color table will always be created and used
+  if (!this.globalPalette || !this.globalPalette.slice) this.globalPalette = this.colorTab;
 
   if (this.firstFrame) {
     this.writeLSD(); // logical screen descriptior
-    this.writePalette(); // global color table
+    this.writePalette(this.globalPalette); // 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.writeImageDesc(frameOptions); // image descriptor
+  if (this.localPalette !== false) this.writePalette(this.colorTab); // local color table
   this.writePixels(); // encode and write pixel data
 
   this.firstFrame = false;
@@ -464,16 +490,16 @@ GIFEncoder.prototype.writeGraphicCtrlExt = function() {
 /*
   Writes Image Descriptor
 */
-GIFEncoder.prototype.writeImageDesc = function() {
+GIFEncoder.prototype.writeImageDesc = function(frameOptions) {
   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);
+  this.writeShort(frameOptions.left || 0); // image position x,y = 0,0
+  this.writeShort(frameOptions.top || 0);
+  this.writeShort(frameOptions.width || this.width); // image size
+  this.writeShort(frameOptions.height || this.height);
 
   // packed fields
-  if (this.firstFrame || this.globalPalette) {
-    // no LCT - GCT is used for first (or only) frame
+  if (this.localPalette === false) {
+    // no LCT
     this.out.writeByte(0);
   } else {
     // specify normal LCT

diff --git a/src/gif.coffee b/src/gif.coffee
@@ -19,8 +19,13 @@ class GIF extends EventEmitter
     delay: 500 # ms
     copy: false
     dispose: -1
+    left: 0
+    top: 0
+    width: null # size of the frame
+    height: null
 
   constructor: (options) ->
+    super options
     @running = false
 
     @options = {}
@@ -48,8 +53,8 @@ class GIF extends EventEmitter
       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?
+    @setOption 'width', (image.width || image.canvas?.width) unless @options.width?
+    @setOption 'height', (image.height || image.canvas?.height) unless @options.height?
 
     if ImageData? and image instanceof ImageData
        frame.data = image.data
@@ -179,13 +184,16 @@ class GIF extends EventEmitter
   getTask: (frame) ->
     index = @frames.indexOf frame
     task =
+      globalOptions: @options
       index: index
       last: index is (@frames.length - 1)
       delay: frame.delay
       dispose: frame.dispose
       transparent: frame.transparent
-      width: @options.width
-      height: @options.height
+      left: frame.left || 0
+      top: frame.top || 0
+      width: frame.width || @options.width
+      height: frame.height || @options.height
       quality: @options.quality
       dither: @options.dither
       globalPalette: @options.globalPalette