mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-09 08:50:59 +00:00
Add more image filters (Sepia, Sepia2, Brightness, Noise, GradientTransparency) based on Stoyan's demo — http://www.phpied.com/pixel-manipulation-in-canvas/ Fix bug with fabric.Image and filters.
This commit is contained in:
kangax
parent
b701627f42
commit
b5d76f752d
7 changed files with 587 additions and 75 deletions
|
|
@ -1,6 +1,6 @@
|
|||
/*! Fabric.js Copyright 2008-2012, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
|
||||
|
||||
var fabric = fabric || { version: "0.8.17" };
|
||||
var fabric = fabric || { version: "0.8.18" };
|
||||
|
||||
if (typeof exports != 'undefined') {
|
||||
exports.fabric = fabric;
|
||||
|
|
|
|||
328
dist/all.js
vendored
328
dist/all.js
vendored
|
|
@ -1,6 +1,6 @@
|
|||
/*! Fabric.js Copyright 2008-2012, Bitsonnet (Juriy Zaytsev, Maxim Chernyak) */
|
||||
|
||||
var fabric = fabric || { version: "0.8.17" };
|
||||
var fabric = fabric || { version: "0.8.18" };
|
||||
|
||||
if (typeof exports != 'undefined') {
|
||||
exports.fabric = fabric;
|
||||
|
|
@ -11196,13 +11196,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
|
|||
*/
|
||||
type: 'image',
|
||||
|
||||
/**
|
||||
* Filters to be applied to an image (when calling `applyFilters`)
|
||||
* @property
|
||||
* @type Array
|
||||
*/
|
||||
filters: [ ],
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param {HTMLImageElement | String} element Image element
|
||||
|
|
@ -11216,6 +11209,8 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, {
|
|||
this._originalImage = this.getElement();
|
||||
this._initConfig(options);
|
||||
|
||||
this.filters = [ ];
|
||||
|
||||
if (options.filters) {
|
||||
this.filters = options.filters;
|
||||
this.applyFilters();
|
||||
|
|
@ -11707,13 +11702,13 @@ fabric.Image.filters = { };
|
|||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Image.filters.Grayscale.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Grayscale",
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Grayscale.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
|
|
@ -11721,7 +11716,7 @@ fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Imag
|
|||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
data = imageData.data,
|
||||
iLen = imageData.width,
|
||||
jLen = imageData.height,
|
||||
index, average, i, j;
|
||||
|
|
@ -11740,8 +11735,8 @@ fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Imag
|
|||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
|
|
@ -11753,19 +11748,19 @@ fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Imag
|
|||
fabric.Image.filters.Grayscale.fromObject = function() {
|
||||
return new fabric.Image.filters.Grayscale();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.RemoveWhite
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Image.filters.RemoveWhite.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "RemoveWhite",
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.RemoveWhite.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
|
|
@ -11774,8 +11769,8 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Im
|
|||
this.threshold = options.threshold || 30;
|
||||
this.distance = options.distance || 20;
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
|
|
@ -11795,10 +11790,10 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Im
|
|||
g = data[i+1];
|
||||
b = data[i+2];
|
||||
|
||||
if (r > limit &&
|
||||
g > limit &&
|
||||
b > limit &&
|
||||
abs(r-g) < distance &&
|
||||
if (r > limit &&
|
||||
g > limit &&
|
||||
b > limit &&
|
||||
abs(r-g) < distance &&
|
||||
abs(r-b) < distance &&
|
||||
abs(g-b) < distance) {
|
||||
|
||||
|
|
@ -11808,15 +11803,15 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Im
|
|||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
threshold: this.threshold,
|
||||
return {
|
||||
type: this.type,
|
||||
threshold: this.threshold,
|
||||
distance: this.distance
|
||||
};
|
||||
}
|
||||
|
|
@ -11831,13 +11826,13 @@ fabric.Image.filters.RemoveWhite.fromObject = function(object) {
|
|||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.filters.Invert.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Invert",
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Invert.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
|
|
@ -11845,9 +11840,9 @@ fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.f
|
|||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
data = imageData.data,
|
||||
iLen = data.length, i;
|
||||
|
||||
|
||||
for (i = 0; i < iLen; i+=4) {
|
||||
data[i] = 255 - data[i];
|
||||
data[i + 1] = 255 - data[i + 1];
|
||||
|
|
@ -11856,8 +11851,8 @@ fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.f
|
|||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
|
|
@ -11869,6 +11864,267 @@ fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.f
|
|||
fabric.Image.filters.Invert.fromObject = function() {
|
||||
return new fabric.Image.filters.Invert();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Sepia
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Sepia = fabric.util.createClass( /** @scope fabric.Image.filters.Sepia.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Sepia",
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Sepia.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
iLen = data.length, i, avg;
|
||||
|
||||
for (i = 0; i < iLen; i+=4) {
|
||||
avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
|
||||
data[i] = avg + 100;
|
||||
data[i + 1] = avg + 50;
|
||||
data[i + 2] = avg + 255;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return { type: this.type };
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Sepia.fromObject = function() {
|
||||
return new fabric.Image.filters.Sepia();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Sepia2
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Sepia2 = fabric.util.createClass( /** @scope fabric.Image.filters.Sepia2.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Sepia2",
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Sepia.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
iLen = data.length, i, r, g, b;
|
||||
|
||||
for (i = 0; i < iLen; i+=4) {
|
||||
|
||||
r = data[i];
|
||||
g = data[i + 1];
|
||||
b = data[i + 2];
|
||||
|
||||
data[i] = (r * 0.393 + g * 0.769 + b * 0.189 ) / 1.351;
|
||||
data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168 ) / 1.203;
|
||||
data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131 ) / 2.140;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return { type: this.type };
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Sepia2.fromObject = function() {
|
||||
return new fabric.Image.filters.Sepia2();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Brightness
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Brightness = fabric.util.createClass( /** @scope fabric.Image.filters.Brightness.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Brightness",
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.Brightness.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options || (options = { });
|
||||
this.brightness = options.brightness || 100;
|
||||
},
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
brightness = this.brightness;
|
||||
|
||||
for (var i = 0, len = data.length; i < len; i += 4) {
|
||||
data[i] += brightness;
|
||||
data[i + 1] += brightness;
|
||||
data[i + 2] += brightness;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
brightness: this.brightness
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Brightness.fromObject = function(object) {
|
||||
return new fabric.Image.filters.Brightness(object);
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Brightness
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Noise = fabric.util.createClass( /** @scope fabric.Image.filters.Noise.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Noise",
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.Brightness.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options || (options = { });
|
||||
this.noise = options.noise || 100;
|
||||
},
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
noise = this.noise, rand;
|
||||
|
||||
for (var i = 0, len = data.length; i < len; i += 4) {
|
||||
|
||||
rand = (0.5 - Math.random()) * noise;
|
||||
|
||||
data[i] += rand;
|
||||
data[i + 1] += rand;
|
||||
data[i + 2] += rand;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
noise: this.noise
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Noise.fromObject = function(object) {
|
||||
return new fabric.Image.filters.Noise(object);
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Brightness
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.GradientTransparency = fabric.util.createClass( /** @scope fabric.Image.filters.GradientTransparency.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "GradientTransparency",
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.GradientTransparency.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options || (options = { });
|
||||
this.threshold = options.threshold || 100;
|
||||
},
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
threshold = this.threshold,
|
||||
total = data.length;
|
||||
|
||||
for (var i = 0, len = data.length; i < len; i += 4) {
|
||||
data[i + 3] = threshold + 255 * (total - i) / total;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
threshold: this.threshold
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.GradientTransparency.fromObject = function(object) {
|
||||
return new fabric.Image.filters.GradientTransparency(object);
|
||||
};
|
||||
//= require "object.class"
|
||||
|
||||
(function(global) {
|
||||
|
|
|
|||
4
dist/all.min.js
vendored
4
dist/all.min.js
vendored
File diff suppressed because one or more lines are too long
BIN
dist/all.min.js.gz
vendored
BIN
dist/all.min.js.gz
vendored
Binary file not shown.
|
|
@ -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.8.17",
|
||||
"version": "0.8.18",
|
||||
"author": "Juriy Zaytsev <kangax@gmail.com>",
|
||||
"keywords": ["canvas", "graphic", "graphics", "SVG", "node-canvas", "parser", "HTML5", "object model"],
|
||||
"repository": "git://github.com/kangax/fabric.js",
|
||||
|
|
|
|||
|
|
@ -50,13 +50,6 @@
|
|||
*/
|
||||
type: 'image',
|
||||
|
||||
/**
|
||||
* Filters to be applied to an image (when calling `applyFilters`)
|
||||
* @property
|
||||
* @type Array
|
||||
*/
|
||||
filters: [ ],
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param {HTMLImageElement | String} element Image element
|
||||
|
|
@ -70,6 +63,8 @@
|
|||
this._originalImage = this.getElement();
|
||||
this._initConfig(options);
|
||||
|
||||
this.filters = [ ];
|
||||
|
||||
if (options.filters) {
|
||||
this.filters = options.filters;
|
||||
this.applyFilters();
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@ fabric.Image.filters = { };
|
|||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Image.filters.Grayscale.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Grayscale",
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Grayscale.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
|
|
@ -22,7 +22,7 @@ fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Imag
|
|||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
data = imageData.data,
|
||||
iLen = imageData.width,
|
||||
jLen = imageData.height,
|
||||
index, average, i, j;
|
||||
|
|
@ -41,8 +41,8 @@ fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Imag
|
|||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
|
|
@ -54,19 +54,19 @@ fabric.Image.filters.Grayscale = fabric.util.createClass( /** @scope fabric.Imag
|
|||
fabric.Image.filters.Grayscale.fromObject = function() {
|
||||
return new fabric.Image.filters.Grayscale();
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.RemoveWhite
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Image.filters.RemoveWhite.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "RemoveWhite",
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.RemoveWhite.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
|
|
@ -75,8 +75,8 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Im
|
|||
this.threshold = options.threshold || 30;
|
||||
this.distance = options.distance || 20;
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
|
|
@ -96,10 +96,10 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Im
|
|||
g = data[i+1];
|
||||
b = data[i+2];
|
||||
|
||||
if (r > limit &&
|
||||
g > limit &&
|
||||
b > limit &&
|
||||
abs(r-g) < distance &&
|
||||
if (r > limit &&
|
||||
g > limit &&
|
||||
b > limit &&
|
||||
abs(r-g) < distance &&
|
||||
abs(r-b) < distance &&
|
||||
abs(g-b) < distance) {
|
||||
|
||||
|
|
@ -109,15 +109,15 @@ fabric.Image.filters.RemoveWhite = fabric.util.createClass( /** @scope fabric.Im
|
|||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
threshold: this.threshold,
|
||||
return {
|
||||
type: this.type,
|
||||
threshold: this.threshold,
|
||||
distance: this.distance
|
||||
};
|
||||
}
|
||||
|
|
@ -132,13 +132,13 @@ fabric.Image.filters.RemoveWhite.fromObject = function(object) {
|
|||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.filters.Invert.prototype */ {
|
||||
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Invert",
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Invert.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
|
|
@ -146,9 +146,9 @@ fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.f
|
|||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
data = imageData.data,
|
||||
iLen = data.length, i;
|
||||
|
||||
|
||||
for (i = 0; i < iLen; i+=4) {
|
||||
data[i] = 255 - data[i];
|
||||
data[i + 1] = 255 - data[i + 1];
|
||||
|
|
@ -157,8 +157,8 @@ fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.f
|
|||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
|
|
@ -169,4 +169,265 @@ fabric.Image.filters.Invert = fabric.util.createClass( /** @scope fabric.Image.f
|
|||
|
||||
fabric.Image.filters.Invert.fromObject = function() {
|
||||
return new fabric.Image.filters.Invert();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Sepia
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Sepia = fabric.util.createClass( /** @scope fabric.Image.filters.Sepia.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Sepia",
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Sepia.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
iLen = data.length, i, avg;
|
||||
|
||||
for (i = 0; i < iLen; i+=4) {
|
||||
avg = 0.3 * data[i] + 0.59 * data[i + 1] + 0.11 * data[i + 2];
|
||||
data[i] = avg + 100;
|
||||
data[i + 1] = avg + 50;
|
||||
data[i + 2] = avg + 255;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return { type: this.type };
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Sepia.fromObject = function() {
|
||||
return new fabric.Image.filters.Sepia();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Sepia2
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Sepia2 = fabric.util.createClass( /** @scope fabric.Image.filters.Sepia2.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Sepia2",
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @memberOf fabric.Image.filters.Sepia.prototype
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
iLen = data.length, i, r, g, b;
|
||||
|
||||
for (i = 0; i < iLen; i+=4) {
|
||||
|
||||
r = data[i];
|
||||
g = data[i + 1];
|
||||
b = data[i + 2];
|
||||
|
||||
data[i] = (r * 0.393 + g * 0.769 + b * 0.189 ) / 1.351;
|
||||
data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168 ) / 1.203;
|
||||
data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131 ) / 2.140;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return { type: this.type };
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Sepia2.fromObject = function() {
|
||||
return new fabric.Image.filters.Sepia2();
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Brightness
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Brightness = fabric.util.createClass( /** @scope fabric.Image.filters.Brightness.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Brightness",
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.Brightness.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options || (options = { });
|
||||
this.brightness = options.brightness || 100;
|
||||
},
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
brightness = this.brightness;
|
||||
|
||||
for (var i = 0, len = data.length; i < len; i += 4) {
|
||||
data[i] += brightness;
|
||||
data[i + 1] += brightness;
|
||||
data[i + 2] += brightness;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
brightness: this.brightness
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Brightness.fromObject = function(object) {
|
||||
return new fabric.Image.filters.Brightness(object);
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Brightness
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.Noise = fabric.util.createClass( /** @scope fabric.Image.filters.Noise.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "Noise",
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.Brightness.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options || (options = { });
|
||||
this.noise = options.noise || 100;
|
||||
},
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
noise = this.noise, rand;
|
||||
|
||||
for (var i = 0, len = data.length; i < len; i += 4) {
|
||||
|
||||
rand = (0.5 - Math.random()) * noise;
|
||||
|
||||
data[i] += rand;
|
||||
data[i + 1] += rand;
|
||||
data[i + 2] += rand;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
noise: this.noise
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.Noise.fromObject = function(object) {
|
||||
return new fabric.Image.filters.Noise(object);
|
||||
};
|
||||
|
||||
/**
|
||||
* @class fabric.Image.filters.Brightness
|
||||
* @memberOf fabric.Image.filters
|
||||
*/
|
||||
fabric.Image.filters.GradientTransparency = fabric.util.createClass( /** @scope fabric.Image.filters.GradientTransparency.prototype */ {
|
||||
|
||||
/**
|
||||
* @param {String} type
|
||||
*/
|
||||
type: "GradientTransparency",
|
||||
|
||||
/**
|
||||
* @memberOf fabric.Image.filters.GradientTransparency.prototype
|
||||
* @param {Object} [options] Options object
|
||||
*/
|
||||
initialize: function(options) {
|
||||
options || (options = { });
|
||||
this.threshold = options.threshold || 100;
|
||||
},
|
||||
|
||||
/**
|
||||
* @method applyTo
|
||||
* @param {Object} canvasEl Canvas element to apply filter to
|
||||
*/
|
||||
applyTo: function(canvasEl) {
|
||||
var context = canvasEl.getContext('2d'),
|
||||
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
||||
data = imageData.data,
|
||||
threshold = this.threshold,
|
||||
total = data.length;
|
||||
|
||||
for (var i = 0, len = data.length; i < len; i += 4) {
|
||||
data[i + 3] = threshold + 255 * (total - i) / total;
|
||||
}
|
||||
|
||||
context.putImageData(imageData, 0, 0);
|
||||
},
|
||||
|
||||
/**
|
||||
* @method toJSON
|
||||
* @return {String} json representation of filter
|
||||
*/
|
||||
toJSON: function() {
|
||||
return {
|
||||
type: this.type,
|
||||
threshold: this.threshold
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
fabric.Image.filters.GradientTransparency.fromObject = function(object) {
|
||||
return new fabric.Image.filters.GradientTransparency(object);
|
||||
};
|
||||
Loading…
Reference in a new issue