Merge pull request #266 from juliandescottes/fix-transparent-gifs
Fix transparent gifs
This commit is contained in:
commit
f2f8158efb
5 changed files with 116 additions and 22 deletions
|
@ -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>";
|
||||
|
|
|
@ -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);
|
||||
};
|
||||
|
||||
|
|
41
src/js/utils/ColorUtils.js
Normal file
41
src/js/utils/ColorUtils.js
Normal 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;
|
||||
}
|
||||
};
|
||||
})();
|
|
@ -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",
|
||||
|
|
29
test/js/utils/ColorUtilsTest.js
Normal file
29
test/js/utils/ColorUtilsTest.js
Normal 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');
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue