fix the transparency bug

src/GIFEncoder.js

@@ -69,7 +69,8 @@ function GIFEncoder(width, height) {
  // frame delay (hundredths)
  this.delay = 0;
 
- this.image = null; // current frame
+ this.image = null; // current frame with white background
+ this.no_bg_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
@@ -142,9 +143,9 @@ GIFEncoder.prototype.setTransparent = function(color) {
  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;
-
+GIFEncoder.prototype.addFrame = function(imageData, bgImageData) {
+ this.image = bgImageData;
+ this.no_bg_image = imageData;
  this.colorTab = this.globalPalette && this.globalPalette.slice ? this.globalPalette : null;
 
  this.getImagePixels(); // convert to correct format if necessary
@@ -232,6 +233,9 @@ GIFEncoder.prototype.writeHeader = function() {
  Analyzes current frame colors and creates color map.
 */
 GIFEncoder.prototype.analyzePixels = function() {
+ var len = this.pixels.length;
+ var nPix = len / 3;
+
  if (!this.colorTab) {
  this.neuQuant = new NeuQuant(this.pixels, this.sample);
  this.neuQuant.buildColormap(); // create reduced palette
@@ -252,6 +256,13 @@ GIFEncoder.prototype.analyzePixels = function() {
  // get closest match to transparent color if specified
  if (this.transparent !== null) {
  this.transIndex = this.findClosest(this.transparent, true);
+ for (var pixelIndex = 0; pixelIndex < nPix; pixelIndex++) {
+
+ if (this.no_bg_image[pixelIndex * 4 + 3] == 0) {
+
+ this.indexedPixels[pixelIndex] = this.transIndex;
+ }
+ }
  }
 };
 

src/gif.coffee

@@ -170,12 +170,25 @@ class GIF extends EventEmitter
  @_canvas.height = @options.height
 
  ctx = @_canvas.getContext '2d'
- ctx.setFill = @options.background
+ ctx.clearRect 0, 0, @options.width, @options.height
+ ctx.fillStyle = @options.background
  ctx.fillRect 0, 0, @options.width, @options.height
+ if image instanceof ImageData
+ ctx.putImageData image, 0, 0
+ return image
  ctx.drawImage image, 0, 0
-
  return @getContextData ctx
 
+ getBgImageData: -> 
+ bg_canvas = document.createElement 'canvas'
+ bg_canvas.width = @options.width
+ bg_canvas.height = @options.height
+ bg_ctx = bg_canvas.getContext '2d'
+ bg_ctx.fillStyle = '#ffffff';
+ bg_ctx.fillRect 0, 0, @options.width, @options.height
+ bg_ctx.drawImage @_canvas, 0, 0
+ return @getContextData bg_ctx
+
  getTask: (frame) ->
  index = @frames.indexOf frame
  task =
@@ -194,10 +207,14 @@ class GIF extends EventEmitter
 
  if frame.data?
  task.data = frame.data
+ task.data = @getContextData frame.data
+ task.bg_data = @getBgImageData()
  else if frame.context?
  task.data = @getContextData frame.context
+ task.bg_data = @getBgImageData()
  else if frame.image?
  task.data = @getImageData frame.image
+ task.bg_data = @getBgImageData()
  else
  throw new Error 'Invalid frame'
 

src/gif.worker.coffee

@@ -15,7 +15,7 @@ renderFrame = (frame) ->
  encoder.setQuality frame.quality
  encoder.setDither frame.dither
  encoder.setGlobalPalette frame.globalPalette
- encoder.addFrame frame.data
+ encoder.addFrame frame.data, frame.bg_data
  encoder.finish() if frame.last
  if frame.globalPalette == true
  frame.globalPalette = encoder.getGlobalPalette()