mirror of
https://github.com/Hopiu/fabric.js.git
synced 2026-04-28 01:04:43 +00:00
500 lines
No EOL
12 KiB
JavaScript
500 lines
No EOL
12 KiB
JavaScript
/**
|
|
* @namespace
|
|
*/
|
|
fabric.Image.filters = { };
|
|
|
|
/**
|
|
* @class fabric.Image.filters.Grayscale
|
|
* @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
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
data = imageData.data,
|
|
iLen = imageData.width,
|
|
jLen = imageData.height,
|
|
index, average, i, j;
|
|
|
|
for (i = 0; i < iLen; i++) {
|
|
for (j = 0; j < jLen; j++) {
|
|
|
|
index = (i * 4) * jLen + (j * 4);
|
|
average = (data[index] + data[index + 1] + data[index + 2]) / 3;
|
|
|
|
data[index] = average;
|
|
data[index + 1] = average;
|
|
data[index + 2] = average;
|
|
}
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* @method toJSON
|
|
* @return {String} json representation of filter
|
|
*/
|
|
toJSON: function() {
|
|
return { type: this.type };
|
|
}
|
|
});
|
|
|
|
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
|
|
*/
|
|
initialize: function(options) {
|
|
options || (options = { });
|
|
this.threshold = options.threshold || 30;
|
|
this.distance = options.distance || 20;
|
|
},
|
|
|
|
/**
|
|
* @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,
|
|
distance = this.distance,
|
|
limit = 255 - threshold,
|
|
abs = Math.abs,
|
|
r, g, b;
|
|
|
|
for (var i = 0, len = data.length; i < len; i += 4) {
|
|
|
|
r = data[i];
|
|
g = data[i+1];
|
|
b = data[i+2];
|
|
|
|
if (r > limit &&
|
|
g > limit &&
|
|
b > limit &&
|
|
abs(r-g) < distance &&
|
|
abs(r-b) < distance &&
|
|
abs(g-b) < distance) {
|
|
|
|
data[i+3] = 1;
|
|
}
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* @method toJSON
|
|
* @return {String} json representation of filter
|
|
*/
|
|
toJSON: function() {
|
|
return {
|
|
type: this.type,
|
|
threshold: this.threshold,
|
|
distance: this.distance
|
|
};
|
|
}
|
|
});
|
|
|
|
fabric.Image.filters.RemoveWhite.fromObject = function(object) {
|
|
return new fabric.Image.filters.RemoveWhite(object);
|
|
};
|
|
|
|
/**
|
|
* @class fabric.Image.filters.Invert
|
|
* @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
|
|
*/
|
|
applyTo: function(canvasEl) {
|
|
var context = canvasEl.getContext('2d'),
|
|
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
|
|
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];
|
|
data[i + 2] = 255 - data[i + 2];
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* @method toJSON
|
|
* @return {String} json representation of filter
|
|
*/
|
|
toJSON: function() {
|
|
return { type: this.type };
|
|
}
|
|
});
|
|
|
|
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);
|
|
};
|
|
|
|
/**
|
|
* @class fabric.Image.filters.Tint
|
|
* @memberOf fabric.Image.filters
|
|
*/
|
|
fabric.Image.filters.Tint = fabric.util.createClass( /** @scope fabric.Image.filters.Tint.prototype */ {
|
|
|
|
/**
|
|
* @param {String} type
|
|
*/
|
|
type: "Tint",
|
|
|
|
/**
|
|
* @memberOf fabric.Image.filters.RemoveWhite.prototype
|
|
* @param {Object} [options] Options object
|
|
*/
|
|
initialize: function(options) {
|
|
options || (options = { });
|
|
this.color = options.color || 0;
|
|
},
|
|
|
|
/**
|
|
* @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,
|
|
iLen = data.length, i,
|
|
r, g, b, a;
|
|
|
|
var rgb = parseInt(this.color).toString(16);
|
|
var cr = parseInt('0x'+rgb.substr(0, 2));
|
|
var cg = parseInt('0x'+rgb.substr(2, 2));
|
|
var cb = parseInt('0x'+rgb.substr(4, 2));
|
|
|
|
for (i = 0; i < iLen; i+=4) {
|
|
|
|
a = data[i+3];
|
|
|
|
if (a > 0){
|
|
data[i] = cr;
|
|
data[i+1] = cg;
|
|
data[i+2] = cb;
|
|
}
|
|
}
|
|
|
|
context.putImageData(imageData, 0, 0);
|
|
},
|
|
|
|
/**
|
|
* @method toJSON
|
|
* @return {String} json representation of filter
|
|
*/
|
|
toJSON: function() {
|
|
return {
|
|
type: this.type,
|
|
color: this.color
|
|
};
|
|
}
|
|
});
|
|
|
|
fabric.Image.filters.Tint.fromObject = function(object) {
|
|
return new fabric.Image.filters.Tint(object);
|
|
}; |