Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-05 12:24:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix fabric.Image.setElement - now _element and _originalElement (until now _originalImage) are set. Closes #745

Browse source 
Add additional parameter callback (invoked after filters habe been applied).
Fix `fabric.Image.fromObject` - don't overwrite image width/height with object width/height.
`fabric.Image.applyFilters` only resets _originalElement - fixes issue if object's width/height are different to _originaElement's width/height
[BACK_INCOMPAT] Renamed `fabric.Image.filters` method `toJSON` -> `toObject`
Fix serializiation of fabric.Image filter objects
This commit is contained in:
Stefan Kienzle 2013-08-09 14:18:27 +02:00
parent add00416d7
commit 6599d393ac
15 changed files with 62 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
build.js
View file

@ -176,6 +176,7 @@ var filesToInclude = [
ifSpecifiedInclude('object_straightening', 'src/mixins/object_straightening.mixin.js'),
ifSpecifiedInclude('image_filters', 'src/filters/filter.js'),
ifSpecifiedInclude('image_filters', 'src/filters/brightness_filter.class.js'),
ifSpecifiedInclude('image_filters', 'src/filters/convolute_filter.class.js'),
ifSpecifiedInclude('image_filters', 'src/filters/gradienttransparency_filter.class.js'),

12
src/filters/brightness_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Brightness filter class
* @class fabric.Image.filters.Brightness
@ -48,10 +42,10 @@ fabric.Image.filters.Brightness = fabric.util.createClass(/** @lends fabric.Imag
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
brightness: this.brightness

12
src/filters/convolute_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Adapted from <a href="http://www.html5rocks.com/en/tutorials/canvas/imagefilters/">html5rocks article</a>
* @class fabric.Image.filters.Convolute
@ -99,10 +93,10 @@ fabric.Image.filters.Convolute = fabric.util.createClass(/** @lends fabric.Image
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
opaque: this.opaque,

5
src/filters/filter.js Normal file
View file

@ -0,0 +1,5 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };

12
src/filters/gradienttransparency_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* GradientTransparency filter class
* @class fabric.Image.filters.GradientTransparency
@ -47,10 +41,10 @@ fabric.Image.filters.GradientTransparency = fabric.util.createClass(/** @lends f
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
threshold: this.threshold

12
src/filters/grayscale_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Grayscale image filter class
* @class fabric.Image.filters.Grayscale
@ -43,10 +37,10 @@ fabric.Image.filters.Grayscale = fabric.util.createClass(/** @lends fabric.Image
},
/**
* Returns json representation of filter
* @return {Object} JSON representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return { type: this.type };
}
});

12
src/filters/invert_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Invert filter class
* @class fabric.Image.filters.Invert
@ -39,10 +33,10 @@ fabric.Image.filters.Invert = fabric.util.createClass(/** @lends fabric.Image.fi
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return { type: this.type };
}
});

12
src/filters/noise_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Noise filter class
* @class fabric.Image.filters.Noise
@ -51,10 +45,10 @@ fabric.Image.filters.Noise = fabric.util.createClass(/** @lends fabric.Image.fil
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
noise: this.noise

12
src/filters/pixelate_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Pixelate filter class
* @class fabric.Image.filters.Pixelate
@ -76,10 +70,10 @@ fabric.Image.filters.Pixelate = fabric.util.createClass(/** @lends fabric.Image.
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
blocksize: this.blocksize

12
src/filters/removewhite_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Remove white filter class
* @class fabric.Image.filters.RemoveWhite
@ -63,10 +57,10 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass(/** @lends fabric.Ima
},
/**
* Returns json representation of filter
* @return {Object} JSON representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
threshold: this.threshold,

12
src/filters/sepia2_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Sepia2 filter class
* @class fabric.Image.filters.Sepia2
@ -43,10 +37,10 @@ fabric.Image.filters.Sepia2 = fabric.util.createClass(/** @lends fabric.Image.fi
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return { type: this.type };
}
});

12
src/filters/sepia_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Sepia filter class
* @class fabric.Image.filters.Sepia
@ -40,10 +34,10 @@ fabric.Image.filters.Sepia = fabric.util.createClass(/** @lends fabric.Image.fil
},
/**
* Returns json representation of filter
* @return {String} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return { type: this.type };
}
});

12
src/filters/tint_filter.class.js
View file

@ -1,9 +1,3 @@
/**
* @namespace fabric.Image.filters
* @memberOf fabric.Image
*/
fabric.Image.filters = fabric.Image.filters || { };
/**
* Tint filter class
* @class fabric.Image.filters.Tint
@ -58,10 +52,10 @@ fabric.Image.filters.Tint = fabric.util.createClass(/** @lends fabric.Image.filt
},
/**
* Returns json representation of filter
* @return {Object} json representation of filter
* Returns object representation of an instance
* @return {Object} Object representation of an instance
*/
toJSON: function() {
toObject: function() {
return {
type: this.type,
color: this.color

42
src/shapes/image.class.js
View file

@ -36,13 +36,12 @@
initialize: function(element, options) {
options || (options = { });
this.filters = [ ];
this.callSuper('initialize', options);
this._initElement(element);
this._originalImage = this.getElement();
this._initConfig(options);
this.filters = [ ];
if (options.filters) {
this.filters = options.filters;
this.applyFilters();
@ -58,14 +57,23 @@
},
/**
* Sets image element for this instance to a specified one
* Sets image element for this instance to a specified one.
* If filters defined they are applied to new image.
* You might need to call `canvas.renderAll` and `object.setCoords` after replacing, to render new image and update controls area.
* @param {HTMLImageElement} element
* @param {Function} [callback] Callback is invoked when all filters have been applied and new image is generated
* @return {fabric.Image} thisArg
* @chainable
*/
setElement: function(element) {
setElement: function(element, callback) {
this._element = element;
this._originalElement = element;
this._initConfig();
if (this.filters.length !== 0) {
this.applyFilters(callback);
}
return this;
},
@ -174,12 +182,14 @@
/**
* Returns object representation of an instance
* @param {Array} propertiesToInclude
* @return {Object} propertiesToInclude Object representation of an instance
* @return {Object} Object representation of an instance
*/
toObject: function(propertiesToInclude) {
return extend(this.callSuper('toObject', propertiesToInclude), {
src: this._originalImage.src || this._originalImage._src,
filters: this.filters.concat()
src: this._originalElement.src || this._originalElement._src,
filters: this.filters.map(function(filterObj) {
return filterObj && filterObj.toObject();
})
});
},
@ -258,12 +268,12 @@
applyFilters: function(callback) {
if (this.filters.length === 0) {
this.setElement(this._originalImage);
this._element = this._originalElement;
callback && callback();
return;
}
var imgEl = this._originalImage,
var imgEl = this._originalElement,
canvasEl = fabric.util.createCanvasElement(),
replacement = fabric.util.createImage(),
_this = this;
@ -397,21 +407,13 @@
/**
* Creates an instance of fabric.Image from its object representation
* @static
* @param {Object} object
* @param {Object} object Object to create an instance from
* @param {Function} [callback] Callback to invoke when an image instance is created
*/
fabric.Image.fromObject = function(object, callback) {
var img = fabric.document.createElement('img'),
src = object.src;
if (object.width) {
img.width = object.width;
}
if (object.height) {
img.height = object.height;
}
/** @ignore */
img.onload = function() {
fabric.Image.prototype._initFilters.call(object, object);
@ -448,7 +450,7 @@
/**
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement})
* @static
* @see http://www.w3.org/TR/SVG/struct.html#ImageElement
* @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement|W3C SVG 1.1}
*/
fabric.Image.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat('x y width height xlink:href'.split(' '));

1
test/unit/image.js
View file

@ -145,6 +145,7 @@
var elImage = _createImageElement();
equal(image.setElement(elImage), image, 'chainable');
equal(image.getElement(), elImage);
equal(image._originalElement, elImage);
start();
});