Merge pull request #266 from juliandescottes/fix-transparent-gifs

Fix transparent gifs
This commit is contained in:
Julian Descottes 2015-04-13 13:20:20 +02:00
commit f2f8158efb
5 changed files with 116 additions and 22 deletions

View file

@ -5,6 +5,7 @@
var MAX_GIF_COLORS = 256;
var MAX_EXPORT_ZOOM = 20;
var DEFAULT_EXPORT_ZOOM = 10;
var MAGIC_PINK = '#FF00FF';
ns.GifExportController = function (piskelController) {
this.piskelController = piskelController;
@ -115,19 +116,24 @@
};
ns.GifExportController.prototype.renderAsImageDataAnimatedGIF = function(zoom, fps, cb) {
var colorCount = pskl.app.currentColorsService.getCurrentColors().length;
var preserveColors = colorCount < MAX_GIF_COLORS;
var currentColors = pskl.app.currentColorsService.computeCurrentColors();
var preserveColors = currentColors.length < MAX_GIF_COLORS;
var transparentColor = this.getTransparentColor(currentColors);
var gif = new window.GIF({
workers: 5,
quality: 1,
width: this.piskelController.getWidth() * zoom,
height: this.piskelController.getHeight() * zoom,
preserveColors : preserveColors
preserveColors : preserveColors,
transparent : parseInt(transparentColor.substring(1), 16)
});
for (var i = 0; i < this.piskelController.getFrameCount(); i++) {
var frame = this.piskelController.getFrameAt(i);
var canvasRenderer = new pskl.rendering.CanvasRenderer(frame, zoom);
canvasRenderer.drawTransparentAs(transparentColor);
var canvas = canvasRenderer.render();
gif.addFrame(canvas.getContext('2d'), {
delay: 1000 / fps
@ -147,8 +153,18 @@
gif.render();
};
// FIXME : HORRIBLE COPY/PASTA
ns.GifExportController.prototype.getTransparentColor = function(currentColors) {
var transparentColor = pskl.utils.ColorUtils.getUnusedColor(currentColors);
if (!transparentColor) {
console.error('Unable to find unused color to use as transparent color in the current sprite');
transparentColor = MAGIC_PINK;
}
return transparentColor;
};
// FIXME : JD : HORRIBLE COPY/PASTA (JD later : where???)
ns.GifExportController.prototype.updateStatus_ = function (imageUrl, error) {
if (imageUrl) {
var linkTpl = "<a class='image-link' href='{{link}}' target='_blank'>{{shortLink}}</a>";

View file

@ -32,6 +32,30 @@
}
};
ns.CurrentColorsService.prototype.computeCurrentColors = function (max) {
var layers = this.piskelController.getLayers();
var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
var colors = {};
frames.forEach(function (f) {
var frameColors = this.cachedFrameProcessor.get(f);
Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
colors[color] = true;
});
}.bind(this));
// Remove transparent color from used colors
delete colors[Constants.TRANSPARENT_COLOR];
var colorsArray = Object.keys(colors);
// limit the array to the max colors to display
if (max) {
colorsArray = colorsArray.slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
}
return this.colorSorter.sort(colorsArray);
};
ns.CurrentColorsService.prototype.isCurrentColorsPaletteSelected_ = function () {
var paletteId = pskl.UserSettings.get(pskl.UserSettings.SELECTED_PALETTE);
var palette = this.paletteService.getPaletteById(paletteId);
@ -48,24 +72,7 @@
};
ns.CurrentColorsService.prototype.updateCurrentColors_ = function () {
var layers = this.piskelController.getLayers();
var frames = layers.map(function (l) {return l.getFrames();}).reduce(function (p, n) {return p.concat(n);});
var colors = {};
frames.forEach(function (f) {
var frameColors = this.cachedFrameProcessor.get(f);
Object.keys(frameColors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED).forEach(function (color) {
colors[color] = true;
});
}.bind(this));
// Remove transparent color from used colors
delete colors[Constants.TRANSPARENT_COLOR];
// limit the array to the max colors to display
var colorsArray = Object.keys(colors).slice(0, Constants.MAX_CURRENT_COLORS_DISPLAYED);
var currentColors = this.colorSorter.sort(colorsArray);
var currentColors = this.computeCurrentColors(Constants.MAX_CURRENT_COLORS_DISPLAYED);
this.setCurrentColors(currentColors);
};

View file

@ -0,0 +1,41 @@
(function () {
var ns = $.namespace('pskl.utils');
ns.ColorUtils = {
getUnusedColor : function (usedColors) {
usedColors = usedColors || [];
// create check map
var colorMap = {};
usedColors.forEach(function (color) {
colorMap[color.toUpperCase()] = true;
});
// start with white
var color = {
r : 255,
g : 255,
b : 255
};
var match = null;
while (true) {
var hex = window.tinycolor(color).toHexString().toUpperCase();
if (!colorMap[hex]) {
match = hex;
break;
} else {
// pick a non null component to decrease its value
var component = (color.r && 'r') || (color.g && 'g') || (color.b && 'b');
if (component) {
color[component] = color[component] - 1;
} else {
// no component available, no match found
break;
}
}
}
return match;
}
};
})();

View file

@ -15,6 +15,7 @@
"js/utils/Base64.js",
"js/utils/BlobUtils.js",
"js/utils/CanvasUtils.js",
"js/utils/ColorUtils.js",
"js/utils/DateUtils.js",
"js/utils/Dom.js",
"js/utils/Event.js",

View file

@ -0,0 +1,29 @@
describe("Color utils", function() {
beforeEach(function() {});
afterEach(function() {});
it("returns a color when provided with array of colors", function() {
// when/then
var unusedColor = pskl.utils.ColorUtils.getUnusedColor(['#ffffff', '#feffff', '#fdffff']);
// verify
expect(unusedColor).toBe('#FCFFFF');
// when/then
unusedColor = pskl.utils.ColorUtils.getUnusedColor(['#fcffff', '#feffff', '#fdffff']);
// verify
expect(unusedColor).toBe('#FFFFFF');
});
it("returns a color for an empty array", function() {
// when/then
var unusedColor = pskl.utils.ColorUtils.getUnusedColor([]);
// verify
expect(unusedColor).toBe('#FFFFFF');
// when/then
unusedColor = pskl.utils.ColorUtils.getUnusedColor();
// verify
expect(unusedColor).toBe('#FFFFFF');
});
});