Skip to content

Commit

Permalink
Fixed the text when passing existing images
Browse files Browse the repository at this point in the history
  • Loading branch information
@gfranko
gfranko committed Jun 20, 2014
1 parent 5e5e7a3 commit a828c2e
Show file tree
Hide file tree
Showing 8 changed files with 107 additions and 30 deletions.
35 changes: 27 additions & 8 deletions build/gifshot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
/* Copyright 2014 Yahoo! Inc.
* Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
*/
var videoStream, NeuQuant, processFrameWorker, animatedGif, screenShot, _utils_, _gifWriter_, _error_, utils;
var videoStream, NeuQuant, processFrameWorker, GifWriter, animatedGif, screenShot, _utils_, _error_, utils;
_utils_ = utils = function () {
var utils = {
'URL': window.URL || window.webkitURL || window.mozURL || window.msURL,
Expand Down Expand Up @@ -48,6 +48,17 @@ _utils_ = utils = function () {
}
return Object.prototype.toString.call(obj) === '[object Object]';
},
'isEmptyObject': function (obj) {
var isEmpty = true;
if (utils.isFunction(Object.keys)) {
isEmpty = !Object.keys(obj).length;
} else {
utils.each(obj, function () {
isEmpty = false;
});
}
return isEmpty;
},
'isArray': function (arr) {
if (!arr) {
return false;
Expand Down Expand Up @@ -940,7 +951,7 @@ processFrameWorker = function () {
// omggif is a JavaScript implementation of a GIF 89a encoder and decoder,
// including animation and compression. It does not rely on any specific
// underlying system, so should run in the browser, Node, or Plask.
_gifWriter_ = function () {
GifWriter = function () {
function GifWriter(buf, width, height, gopts) {
var p = 0;
gopts = gopts === undefined ? {} : gopts;
Expand Down Expand Up @@ -1269,7 +1280,7 @@ _gifWriter_ = function () {
/* Copyright 2014 Yahoo! Inc.
* Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
*/
animatedGif = function (frameWorkerCode, GifWriter) {
animatedGif = function (frameWorkerCode) {
var AnimatedGIF = function (options) {
options = utils.isObject(options) ? options : {};
this.canvas = null;
Expand Down Expand Up @@ -1441,13 +1452,21 @@ animatedGif = function (frameWorkerCode, GifWriter) {
'setRepeat': function (r) {
this.repeat = r;
},
'addFrame': function (element, src) {
var self = this, ctx = this.ctx, options = this.options, width = options.width, height = options.height, imageData;
'addFrame': function (element, src, gifshotOptions) {
gifshotOptions = utils.isObject(gifshotOptions) ? gifshotOptions : {};
var self = this, ctx = this.ctx, options = this.options, width = options.width, height = options.height, imageData, gifHeight = gifshotOptions.gifHeight, gifWidth = gifshotOptions.gifWidth, text = gifshotOptions.text, fontWeight = gifshotOptions.fontWeight, fontSize = gifshotOptions.fontSize, fontFamily = gifshotOptions.fontFamily, fontColor = gifshotOptions.fontColor, textAlign = gifshotOptions.textAlign, textBaseline = gifshotOptions.textBaseline, textXCoordinate = gifshotOptions.textXCoordinate ? gifshotOptions.textXCoordinate : textAlign === 'left' ? 1 : textAlign === 'right' ? width : width / 2, textYCoordinate = gifshotOptions.textYCoordinate ? gifshotOptions.textYCoordinate : textBaseline === 'top' ? 1 : textBaseline === 'center' ? height / 2 : height, font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
try {
if (src) {
element.src = src;
}
ctx.drawImage(element, 0, 0, width, height);
if (text) {
ctx.font = font;
ctx.fillStyle = fontColor;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillText(text, textXCoordinate, textYCoordinate);
}
imageData = ctx.getImageData(0, 0, width, height);
self.addFrameImageData(imageData);
} catch (e) {
Expand Down Expand Up @@ -1496,7 +1515,7 @@ animatedGif = function (frameWorkerCode, GifWriter) {
}
};
return AnimatedGIF;
}(processFrameWorker, _gifWriter_);
}(processFrameWorker);
// screenShot.js
// =============
// Inspired from https://github.com/meatspaces/meatspace-chat/blob/master/public/javascripts/base/videoShooter.js
Expand Down Expand Up @@ -1700,7 +1719,7 @@ _error_ = function () {
currentImage = images[x];
if (utils.isElement(currentImage)) {
currentImage.crossOrigin = 'Anonymous';
ag.addFrame(currentImage);
ag.addFrame(currentImage, currentImage.src, options);
loadedImages += 1;
if (loadedImages === imagesLength) {
gifshot._getBase64GIF(ag, callback);
Expand All @@ -1721,7 +1740,7 @@ _error_ = function () {
});
(function (tempImage, ag, currentImage) {
tempImage.onload = function () {
ag.addFrame(tempImage, currentImage);
ag.addFrame(tempImage, currentImage, options);
utils.removeElement(tempImage);
loadedImages += 1;
if (loadedImages === imagesLength) {
Expand Down
2 changes: 1 addition & 1 deletion build/gifshot.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion gulpfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ gulp.task('test', function() {
});

// The default task (called when you run `gulp`)
gulp.task('default', ['clean','lint', 'minify', 'add-unminified-file-to-build']);
gulp.task('default', ['clean','minify', 'add-unminified-file-to-build']);

// The watch task
gulp.task('watch', function() {
Expand Down
4 changes: 3 additions & 1 deletion index.html
View file

Large diffs are not rendered by default.

35 changes: 27 additions & 8 deletions src/gifshot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
/* Copyright 2014 Yahoo! Inc.
* Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
*/
var videoStream, NeuQuant, processFrameWorker, animatedGif, screenShot, _utils_, _gifWriter_, _error_, utils;
var videoStream, NeuQuant, processFrameWorker, GifWriter, animatedGif, screenShot, _utils_, _error_, utils;
_utils_ = utils = function () {
var utils = {
'URL': window.URL || window.webkitURL || window.mozURL || window.msURL,
Expand Down Expand Up @@ -41,6 +41,17 @@ _utils_ = utils = function () {
}
return Object.prototype.toString.call(obj) === '[object Object]';
},
'isEmptyObject': function (obj) {
var isEmpty = true;
if (utils.isFunction(Object.keys)) {
isEmpty = !Object.keys(obj).length;
} else {
utils.each(obj, function () {
isEmpty = false;
});
}
return isEmpty;
},
'isArray': function (arr) {
if (!arr) {
return false;
Expand Down Expand Up @@ -933,7 +944,7 @@ processFrameWorker = function () {
// omggif is a JavaScript implementation of a GIF 89a encoder and decoder,
// including animation and compression. It does not rely on any specific
// underlying system, so should run in the browser, Node, or Plask.
_gifWriter_ = function () {
GifWriter = function () {
function GifWriter(buf, width, height, gopts) {
var p = 0;
gopts = gopts === undefined ? {} : gopts;
Expand Down Expand Up @@ -1262,7 +1273,7 @@ _gifWriter_ = function () {
/* Copyright 2014 Yahoo! Inc.
* Copyrights licensed under the MIT License. See the accompanying LICENSE file for terms.
*/
animatedGif = function (frameWorkerCode, GifWriter) {
animatedGif = function (frameWorkerCode) {
var AnimatedGIF = function (options) {
options = utils.isObject(options) ? options : {};
this.canvas = null;
Expand Down Expand Up @@ -1434,13 +1445,21 @@ animatedGif = function (frameWorkerCode, GifWriter) {
'setRepeat': function (r) {
this.repeat = r;
},
'addFrame': function (element, src) {
var self = this, ctx = this.ctx, options = this.options, width = options.width, height = options.height, imageData;
'addFrame': function (element, src, gifshotOptions) {
gifshotOptions = utils.isObject(gifshotOptions) ? gifshotOptions : {};
var self = this, ctx = this.ctx, options = this.options, width = options.width, height = options.height, imageData, gifHeight = gifshotOptions.gifHeight, gifWidth = gifshotOptions.gifWidth, text = gifshotOptions.text, fontWeight = gifshotOptions.fontWeight, fontSize = gifshotOptions.fontSize, fontFamily = gifshotOptions.fontFamily, fontColor = gifshotOptions.fontColor, textAlign = gifshotOptions.textAlign, textBaseline = gifshotOptions.textBaseline, textXCoordinate = gifshotOptions.textXCoordinate ? gifshotOptions.textXCoordinate : textAlign === 'left' ? 1 : textAlign === 'right' ? width : width / 2, textYCoordinate = gifshotOptions.textYCoordinate ? gifshotOptions.textYCoordinate : textBaseline === 'top' ? 1 : textBaseline === 'center' ? height / 2 : height, font = fontWeight + ' ' + fontSize + ' ' + fontFamily;
try {
if (src) {
element.src = src;
}
ctx.drawImage(element, 0, 0, width, height);
if (text) {
ctx.font = font;
ctx.fillStyle = fontColor;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillText(text, textXCoordinate, textYCoordinate);
}
imageData = ctx.getImageData(0, 0, width, height);
self.addFrameImageData(imageData);
} catch (e) {
Expand Down Expand Up @@ -1489,7 +1508,7 @@ animatedGif = function (frameWorkerCode, GifWriter) {
}
};
return AnimatedGIF;
}(processFrameWorker, _gifWriter_);
}(processFrameWorker);
// screenShot.js
// =============
// Inspired from https://github.com/meatspaces/meatspace-chat/blob/master/public/javascripts/base/videoShooter.js
Expand Down Expand Up @@ -1693,7 +1712,7 @@ _error_ = function () {
currentImage = images[x];
if (utils.isElement(currentImage)) {
currentImage.crossOrigin = 'Anonymous';
ag.addFrame(currentImage);
ag.addFrame(currentImage, currentImage.src, options);
loadedImages += 1;
if (loadedImages === imagesLength) {
gifshot._getBase64GIF(ag, callback);
Expand All @@ -1714,7 +1733,7 @@ _error_ = function () {
});
(function (tempImage, ag, currentImage) {
tempImage.onload = function () {
ag.addFrame(tempImage, currentImage);
ag.addFrame(tempImage, currentImage, options);
utils.removeElement(tempImage);
loadedImages += 1;
if (loadedImages === imagesLength) {
Expand Down
30 changes: 27 additions & 3 deletions src/modules/animatedGif.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ define([
'utils',
'processFrameWorker',
'NeuQuant',
'gifWriter'
'GifWriter'
], function(utils, frameWorkerCode, NeuQuant, GifWriter) {
var AnimatedGIF = function(options) {
options = utils.isObject(options) ? options : {};
Expand Down Expand Up @@ -243,19 +243,43 @@ define([
'setRepeat': function(r) {
this.repeat = r;
},
'addFrame': function(element, src) {
'addFrame': function(element, src, gifshotOptions) {
gifshotOptions = utils.isObject(gifshotOptions) ? gifshotOptions : {};

var self = this,
ctx = this.ctx,
options = this.options,
width = options.width,
height = options.height,
imageData;
imageData,
gifHeight = gifshotOptions.gifHeight,
gifWidth = gifshotOptions.gifWidth,
text = gifshotOptions.text,
fontWeight = gifshotOptions.fontWeight,
fontSize = gifshotOptions.fontSize,
fontFamily = gifshotOptions.fontFamily,
fontColor = gifshotOptions.fontColor,
textAlign = gifshotOptions.textAlign,
textBaseline = gifshotOptions.textBaseline,
textXCoordinate = gifshotOptions.textXCoordinate ? gifshotOptions.textXCoordinate : textAlign === 'left' ? 1 : textAlign === 'right' ? width : width/2,
textYCoordinate = gifshotOptions.textYCoordinate ? gifshotOptions.textYCoordinate : textBaseline === 'top' ? 1 : textBaseline === 'center' ? height/2 : height,
font = fontWeight + ' ' + fontSize + ' ' + fontFamily;

try {
if(src) {
element.src = src;
}

ctx.drawImage(element, 0, 0, width, height);

if(text) {
ctx.font = font;
ctx.fillStyle = fontColor;
ctx.textAlign = textAlign;
ctx.textBaseline = textBaseline;
ctx.fillText(text, textXCoordinate, textYCoordinate);
}

imageData = ctx.getImageData(0, 0, width, height);

self.addFrameImageData(imageData);
Expand Down
17 changes: 9 additions & 8 deletions src/modules/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ require([
currentImage = images[x];
if(utils.isElement(currentImage)) {
currentImage.crossOrigin = 'Anonymous';
ag.addFrame(currentImage);
ag.addFrame(currentImage, currentImage.src, options);
loadedImages += 1;
if(loadedImages === imagesLength) {
gifshot._getBase64GIF(ag, callback);
Expand All @@ -106,7 +106,7 @@ require([

(function(tempImage, ag, currentImage) {
tempImage.onload = function() {
ag.addFrame(tempImage, currentImage);
ag.addFrame(tempImage, currentImage, options);
utils.removeElement(tempImage);
loadedImages += 1;
if(loadedImages === imagesLength) {
Expand Down Expand Up @@ -268,29 +268,30 @@ require([
document.body.appendChild(videoElement);
}

// Firefox doesn't seem to obey autoplay if the element is not in the DOM when the content
// is loaded, so we must manually trigger play after adding it, or the video will be frozen
videoElement.play();

// Firefox doesn't seem to obey autoplay if the element is not in the DOM when the content
// is loaded, so we must manually trigger play after adding it, or the video will be frozen
videoElement.play();

setTimeout(function() {
setTimeout(function() {
screenShot.getWebcamGif(options, function(obj) {
gifshot.stopVideoStreaming(obj);
completeCallback(obj);
});
}, wait);
}, wait);
}
},
publicApi = function (api) {
var method,
currentMethod,
publicApi = {};

for(method in api) {
currentMethod = api[method];
if(method.charAt(0) !== '_') {
publicApi[method] = api[method];
}
}

return publicApi;
};

Expand Down
12 changes: 12 additions & 0 deletions src/modules/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,18 @@ define(function() {
}
return Object.prototype.toString.call(obj) === '[object Object]';
},
'isEmptyObject': function(obj) {
var isEmpty = true;

if(utils.isFunction(Object.keys)) {
isEmpty = !Object.keys(obj).length;
} else {
utils.each(obj, function() {
isEmpty = false;
});
}
return isEmpty;
},
'isArray': function(arr) {
if(!arr) {
return false;
Expand Down

0 comments on commit a828c2e

Please sign in to comment.