Make fabric.Image#applyFilters work in node.

This commit is contained in:
kangax 2011-10-29 14:11:44 -04:00
parent bbe535848b
commit d226102fbb
4 changed files with 43 additions and 21 deletions

View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.6.5" };
var fabric = fabric || { version: "0.6.6" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;

31
dist/all.js vendored
View file

@ -1,6 +1,6 @@
/*! Fabric.js Copyright 2008-2011, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
var fabric = fabric || { version: "0.6.5" };
var fabric = fabric || { version: "0.6.6" };
if (typeof exports != 'undefined') {
exports.fabric = fabric;
@ -10659,22 +10659,23 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
* @param {Function} callback Callback is invoked when all filters have been applied and new image is generated
*/
applyFilters: function(callback) {
var imgEl = this._originalImage,
var isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined',
imgEl = this._originalImage,
canvasEl = fabric.document.createElement('canvas'),
replacement = fabric.document.createElement('img'),
replacement = isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img'),
_this = this;
canvasEl.width = imgEl.width;
canvasEl.height = imgEl.height;
canvasEl.getContext('2d').drawImage(imgEl, 0, 0);
this.filters.forEach(function(filter) {
filter && filter.applyTo(canvasEl);
});
/** @ignore */
/** @ignore */
replacement.onload = function() {
_this.setElement(replacement);
callback && callback();
@ -10682,9 +10683,19 @@ fabric.util.object.extend(fabric.Canvas.prototype, {
};
replacement.width = imgEl.width;
replacement.height = imgEl.height;
replacement.src = canvasEl.toDataURL('image/png');
if (isLikelyNode) {
var base64str = canvasEl.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
replacement.src = new Buffer(base64str, 'base64');
_this.setElement(replacement);
// onload doesn't fire in node, so we invoke callback manually
callback && callback();
}
else {
replacement.src = canvasEl.toDataURL('image/png');
}
return this;
},

View file

@ -1,7 +1,7 @@
{
"name": "fabric",
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"version": "0.6.5",
"version": "0.6.6",
"author": "Juriy Zaytsev <kangax@gmail.com>",
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
"repository": "git://github.com/kangax/fabric.js",

View file

@ -240,22 +240,23 @@
* @param {Function} callback Callback is invoked when all filters have been applied and new image is generated
*/
applyFilters: function(callback) {
var imgEl = this._originalImage,
var isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined',
imgEl = this._originalImage,
canvasEl = fabric.document.createElement('canvas'),
replacement = fabric.document.createElement('img'),
replacement = isLikelyNode ? new (require('canvas').Image) : fabric.document.createElement('img'),
_this = this;
canvasEl.width = imgEl.width;
canvasEl.height = imgEl.height;
canvasEl.getContext('2d').drawImage(imgEl, 0, 0);
this.filters.forEach(function(filter) {
filter && filter.applyTo(canvasEl);
});
/** @ignore */
/** @ignore */
replacement.onload = function() {
_this.setElement(replacement);
callback && callback();
@ -263,9 +264,19 @@
};
replacement.width = imgEl.width;
replacement.height = imgEl.height;
replacement.src = canvasEl.toDataURL('image/png');
if (isLikelyNode) {
var base64str = canvasEl.toDataURL('image/png').replace(/data:image\/png;base64,/, '');
replacement.src = new Buffer(base64str, 'base64');
_this.setElement(replacement);
// onload doesn't fire in node, so we invoke callback manually
callback && callback();
}
else {
replacement.src = canvasEl.toDataURL('image/png');
}
return this;
},