File: //home/cafsindia/snap.cafsinfotech.in/node_modules/fabric/src/shapes/image.class.js
(function(global) {
'use strict';
var extend = fabric.util.object.extend;
if (!global.fabric) {
global.fabric = { };
}
if (global.fabric.Image) {
fabric.warn('fabric.Image is already defined.');
return;
}
/**
* Image class
* @class fabric.Image
* @extends fabric.Object
* @tutorial {@link http://fabricjs.com/fabric-intro-part-1#images}
* @see {@link fabric.Image#initialize} for constructor definition
*/
fabric.Image = fabric.util.createClass(fabric.Object, /** @lends fabric.Image.prototype */ {
/**
* Type of an object
* @type String
* @default
*/
type: 'image',
/**
* Width of a stroke.
* For image quality a stroke multiple of 2 gives better results.
* @type Number
* @default
*/
strokeWidth: 0,
/**
* When calling {@link fabric.Image.getSrc}, return value from element src with `element.getAttribute('src')`.
* This allows for relative urls as image src.
* @since 2.7.0
* @type Boolean
* @default
*/
srcFromAttribute: false,
/**
* private
* contains last value of scaleX to detect
* if the Image got resized after the last Render
* @type Number
*/
_lastScaleX: 1,
/**
* private
* contains last value of scaleY to detect
* if the Image got resized after the last Render
* @type Number
*/
_lastScaleY: 1,
/**
* private
* contains last value of scaling applied by the apply filter chain
* @type Number
*/
_filterScalingX: 1,
/**
* private
* contains last value of scaling applied by the apply filter chain
* @type Number
*/
_filterScalingY: 1,
/**
* minimum scale factor under which any resizeFilter is triggered to resize the image
* 0 will disable the automatic resize. 1 will trigger automatically always.
* number bigger than 1 are not implemented yet.
* @type Number
*/
minimumScaleTrigger: 0.5,
/**
* List of properties to consider when checking if
* state of an object is changed ({@link fabric.Object#hasStateChanged})
* as well as for history (undo/redo) purposes
* @type Array
*/
stateProperties: fabric.Object.prototype.stateProperties.concat('cropX', 'cropY'),
/**
* List of properties to consider when checking if cache needs refresh
* Those properties are checked by statefullCache ON ( or lazy mode if we want ) or from single
* calls to Object.set(key, value). If the key is in this list, the object is marked as dirty
* and refreshed at the next render
* @type Array
*/
cacheProperties: fabric.Object.prototype.cacheProperties.concat('cropX', 'cropY'),
/**
* key used to retrieve the texture representing this image
* @since 2.0.0
* @type String
* @default
*/
cacheKey: '',
/**
* Image crop in pixels from original image size.
* @since 2.0.0
* @type Number
* @default
*/
cropX: 0,
/**
* Image crop in pixels from original image size.
* @since 2.0.0
* @type Number
* @default
*/
cropY: 0,
/**
* Indicates whether this canvas will use image smoothing when painting this image.
* Also influence if the cacheCanvas for this image uses imageSmoothing
* @since 4.0.0-beta.11
* @type Boolean
* @default
*/
imageSmoothing: true,
/**
* Constructor
* Image can be initialized with any canvas drawable or a string.
* The string should be a url and will be loaded as an image.
* Canvas and Image element work out of the box, while videos require extra code to work.
* Please check video element events for seeking.
* @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element
* @param {Object} [options] Options object
* @param {function} [callback] callback function to call after eventual filters applied.
* @return {fabric.Image} thisArg
*/
initialize: function(element, options) {
options || (options = { });
this.filters = [];
this.cacheKey = 'texture' + fabric.Object.__uid++;
this.callSuper('initialize', options);
this._initElement(element, options);
},
/**
* Returns image element which this instance if based on
* @return {HTMLImageElement} Image element
*/
getElement: function() {
return this._element || {};
},
/**
* 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 {Object} [options] Options object
* @return {fabric.Image} thisArg
* @chainable
*/
setElement: function(element, options) {
this.removeTexture(this.cacheKey);
this.removeTexture(this.cacheKey + '_filtered');
this._element = element;
this._originalElement = element;
this._initConfig(options);
if (this.filters.length !== 0) {
this.applyFilters();
}
// resizeFilters work on the already filtered copy.
// we need to apply resizeFilters AFTER normal filters.
// applyResizeFilters is run more often than normal filters
// and is triggered by user interactions rather than dev code
if (this.resizeFilter) {
this.applyResizeFilters();
}
return this;
},
/**
* Delete a single texture if in webgl mode
*/
removeTexture: function(key) {
var backend = fabric.filterBackend;
if (backend && backend.evictCachesForKey) {
backend.evictCachesForKey(key);
}
},
/**
* Delete textures, reference to elements and eventually JSDOM cleanup
*/
dispose: function () {
this.callSuper('dispose');
this.removeTexture(this.cacheKey);
this.removeTexture(this.cacheKey + '_filtered');
this._cacheContext = undefined;
['_originalElement', '_element', '_filteredEl', '_cacheCanvas'].forEach((function(element) {
fabric.util.cleanUpJsdomNode(this[element]);
this[element] = undefined;
}).bind(this));
},
/**
* Get the crossOrigin value (of the corresponding image element)
*/
getCrossOrigin: function() {
return this._originalElement && (this._originalElement.crossOrigin || null);
},
/**
* Returns original size of an image
* @return {Object} Object with "width" and "height" properties
*/
getOriginalSize: function() {
var element = this.getElement();
return {
width: element.naturalWidth || element.width,
height: element.naturalHeight || element.height
};
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_stroke: function(ctx) {
if (!this.stroke || this.strokeWidth === 0) {
return;
}
var w = this.width / 2, h = this.height / 2;
ctx.beginPath();
ctx.moveTo(-w, -h);
ctx.lineTo(w, -h);
ctx.lineTo(w, h);
ctx.lineTo(-w, h);
ctx.lineTo(-w, -h);
ctx.closePath();
},
/**
* Returns object representation of an instance
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} Object representation of an instance
*/
toObject: function(propertiesToInclude) {
var filters = [];
this.filters.forEach(function(filterObj) {
if (filterObj) {
filters.push(filterObj.toObject());
}
});
var object = extend(
this.callSuper(
'toObject',
['cropX', 'cropY'].concat(propertiesToInclude)
), {
src: this.getSrc(),
crossOrigin: this.getCrossOrigin(),
filters: filters,
});
if (this.resizeFilter) {
object.resizeFilter = this.resizeFilter.toObject();
}
return object;
},
/**
* Returns true if an image has crop applied, inspecting values of cropX,cropY,width,height.
* @return {Boolean}
*/
hasCrop: function() {
return this.cropX || this.cropY || this.width < this._element.width || this.height < this._element.height;
},
/* _TO_SVG_START_ */
/**
* Returns svg representation of an instance
* @return {Array} an array of strings with the specific svg representation
* of the instance
*/
_toSVG: function() {
var svgString = [], imageMarkup = [], strokeSvg, element = this._element,
x = -this.width / 2, y = -this.height / 2, clipPath = '', imageRendering = '';
if (!element) {
return [];
}
if (this.hasCrop()) {
var clipPathId = fabric.Object.__uid++;
svgString.push(
'<clipPath id="imageCrop_' + clipPathId + '">\n',
'\t<rect x="' + x + '" y="' + y + '" width="' + this.width + '" height="' + this.height + '" />\n',
'</clipPath>\n'
);
clipPath = ' clip-path="url(#imageCrop_' + clipPathId + ')" ';
}
if (!this.imageSmoothing) {
imageRendering = '" image-rendering="optimizeSpeed';
}
imageMarkup.push('\t<image ', 'COMMON_PARTS', 'xlink:href="', this.getSvgSrc(true),
'" x="', x - this.cropX, '" y="', y - this.cropY,
// we're essentially moving origin of transformation from top/left corner to the center of the shape
// by wrapping it in container <g> element with actual transformation, then offsetting object to the top/left
// so that object's center aligns with container's left/top
'" width="', element.width || element.naturalWidth,
'" height="', element.height || element.height,
imageRendering,
'"', clipPath,
'></image>\n');
if (this.stroke || this.strokeDashArray) {
var origFill = this.fill;
this.fill = null;
strokeSvg = [
'\t<rect ',
'x="', x, '" y="', y,
'" width="', this.width, '" height="', this.height,
'" style="', this.getSvgStyles(),
'"/>\n'
];
this.fill = origFill;
}
if (this.paintFirst !== 'fill') {
svgString = svgString.concat(strokeSvg, imageMarkup);
}
else {
svgString = svgString.concat(imageMarkup, strokeSvg);
}
return svgString;
},
/* _TO_SVG_END_ */
/**
* Returns source of an image
* @param {Boolean} filtered indicates if the src is needed for svg
* @return {String} Source of an image
*/
getSrc: function(filtered) {
var element = filtered ? this._element : this._originalElement;
if (element) {
if (element.toDataURL) {
return element.toDataURL();
}
if (this.srcFromAttribute) {
return element.getAttribute('src');
}
else {
return element.src;
}
}
else {
return this.src || '';
}
},
/**
* Sets source of an image
* @param {String} src Source string (URL)
* @param {Function} [callback] Callback is invoked when image has been loaded (and all filters have been applied)
* @param {Object} [options] Options object
* @param {String} [options.crossOrigin] crossOrigin value (one of "", "anonymous", "use-credentials")
* @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes
* @return {fabric.Image} thisArg
* @chainable
*/
setSrc: function(src, callback, options) {
fabric.util.loadImage(src, function(img, isError) {
this.setElement(img, options);
this._setWidthHeight();
callback && callback(this, isError);
}, this, options && options.crossOrigin);
return this;
},
/**
* Returns string representation of an instance
* @return {String} String representation of an instance
*/
toString: function() {
return '#<fabric.Image: { src: "' + this.getSrc() + '" }>';
},
applyResizeFilters: function() {
var filter = this.resizeFilter,
minimumScale = this.minimumScaleTrigger,
objectScale = this.getTotalObjectScaling(),
scaleX = objectScale.scaleX,
scaleY = objectScale.scaleY,
elementToFilter = this._filteredEl || this._originalElement;
if (this.group) {
this.set('dirty', true);
}
if (!filter || (scaleX > minimumScale && scaleY > minimumScale)) {
this._element = elementToFilter;
this._filterScalingX = 1;
this._filterScalingY = 1;
this._lastScaleX = scaleX;
this._lastScaleY = scaleY;
return;
}
if (!fabric.filterBackend) {
fabric.filterBackend = fabric.initFilterBackend();
}
var canvasEl = fabric.util.createCanvasElement(),
cacheKey = this._filteredEl ? (this.cacheKey + '_filtered') : this.cacheKey,
sourceWidth = elementToFilter.width, sourceHeight = elementToFilter.height;
canvasEl.width = sourceWidth;
canvasEl.height = sourceHeight;
this._element = canvasEl;
this._lastScaleX = filter.scaleX = scaleX;
this._lastScaleY = filter.scaleY = scaleY;
fabric.filterBackend.applyFilters(
[filter], elementToFilter, sourceWidth, sourceHeight, this._element, cacheKey);
this._filterScalingX = canvasEl.width / this._originalElement.width;
this._filterScalingY = canvasEl.height / this._originalElement.height;
},
/**
* Applies filters assigned to this image (from "filters" array) or from filter param
* @method applyFilters
* @param {Array} filters to be applied
* @param {Boolean} forResizing specify if the filter operation is a resize operation
* @return {thisArg} return the fabric.Image object
* @chainable
*/
applyFilters: function(filters) {
filters = filters || this.filters || [];
filters = filters.filter(function(filter) { return filter && !filter.isNeutralState(); });
this.set('dirty', true);
// needs to clear out or WEBGL will not resize correctly
this.removeTexture(this.cacheKey + '_filtered');
if (filters.length === 0) {
this._element = this._originalElement;
this._filteredEl = null;
this._filterScalingX = 1;
this._filterScalingY = 1;
return this;
}
var imgElement = this._originalElement,
sourceWidth = imgElement.naturalWidth || imgElement.width,
sourceHeight = imgElement.naturalHeight || imgElement.height;
if (this._element === this._originalElement) {
// if the element is the same we need to create a new element
var canvasEl = fabric.util.createCanvasElement();
canvasEl.width = sourceWidth;
canvasEl.height = sourceHeight;
this._element = canvasEl;
this._filteredEl = canvasEl;
}
else {
// clear the existing element to get new filter data
// also dereference the eventual resized _element
this._element = this._filteredEl;
this._filteredEl.getContext('2d').clearRect(0, 0, sourceWidth, sourceHeight);
// we also need to resize again at next renderAll, so remove saved _lastScaleX/Y
this._lastScaleX = 1;
this._lastScaleY = 1;
}
if (!fabric.filterBackend) {
fabric.filterBackend = fabric.initFilterBackend();
}
fabric.filterBackend.applyFilters(
filters, this._originalElement, sourceWidth, sourceHeight, this._element, this.cacheKey);
if (this._originalElement.width !== this._element.width ||
this._originalElement.height !== this._element.height) {
this._filterScalingX = this._element.width / this._originalElement.width;
this._filterScalingY = this._element.height / this._originalElement.height;
}
return this;
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_render: function(ctx) {
fabric.util.setImageSmoothing(ctx, this.imageSmoothing);
if (this.isMoving !== true && this.resizeFilter && this._needsResize()) {
this.applyResizeFilters();
}
this._stroke(ctx);
this._renderPaintInOrder(ctx);
},
/**
* Paint the cached copy of the object on the target context.
* it will set the imageSmoothing for the draw operation
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
drawCacheOnCanvas: function(ctx) {
fabric.util.setImageSmoothing(ctx, this.imageSmoothing);
fabric.Object.prototype.drawCacheOnCanvas.call(this, ctx);
},
/**
* Decide if the object should cache or not. Create its own cache level
* needsItsOwnCache should be used when the object drawing method requires
* a cache step. None of the fabric classes requires it.
* Generally you do not cache objects in groups because the group outside is cached.
* This is the special image version where we would like to avoid caching where possible.
* Essentially images do not benefit from caching. They may require caching, and in that
* case we do it. Also caching an image usually ends in a loss of details.
* A full performance audit should be done.
* @return {Boolean}
*/
shouldCache: function() {
return this.needsItsOwnCache();
},
_renderFill: function(ctx) {
var elementToDraw = this._element;
if (!elementToDraw) {
return;
}
var scaleX = this._filterScalingX, scaleY = this._filterScalingY,
w = this.width, h = this.height, min = Math.min, max = Math.max,
// crop values cannot be lesser than 0.
cropX = max(this.cropX, 0), cropY = max(this.cropY, 0),
elWidth = elementToDraw.naturalWidth || elementToDraw.width,
elHeight = elementToDraw.naturalHeight || elementToDraw.height,
sX = cropX * scaleX,
sY = cropY * scaleY,
// the width height cannot exceed element width/height, starting from the crop offset.
sW = min(w * scaleX, elWidth - sX),
sH = min(h * scaleY, elHeight - sY),
x = -w / 2, y = -h / 2,
maxDestW = min(w, elWidth / scaleX - cropX),
maxDestH = min(h, elHeight / scaleY - cropY);
elementToDraw && ctx.drawImage(elementToDraw, sX, sY, sW, sH, x, y, maxDestW, maxDestH);
},
/**
* needed to check if image needs resize
* @private
*/
_needsResize: function() {
var scale = this.getTotalObjectScaling();
return (scale.scaleX !== this._lastScaleX || scale.scaleY !== this._lastScaleY);
},
/**
* @private
*/
_resetWidthHeight: function() {
this.set(this.getOriginalSize());
},
/**
* The Image class's initialization method. This method is automatically
* called by the constructor.
* @private
* @param {HTMLImageElement|String} element The element representing the image
* @param {Object} [options] Options object
*/
_initElement: function(element, options) {
this.setElement(fabric.util.getById(element), options);
fabric.util.addClass(this.getElement(), fabric.Image.CSS_CANVAS);
},
/**
* @private
* @param {Object} [options] Options object
*/
_initConfig: function(options) {
options || (options = { });
this.setOptions(options);
this._setWidthHeight(options);
},
/**
* @private
* @param {Array} filters to be initialized
* @param {Function} callback Callback to invoke when all fabric.Image.filters instances are created
*/
_initFilters: function(filters, callback) {
if (filters && filters.length) {
fabric.util.enlivenObjects(filters, function(enlivenedObjects) {
callback && callback(enlivenedObjects);
}, 'fabric.Image.filters');
}
else {
callback && callback();
}
},
/**
* @private
* Set the width and the height of the image object, using the element or the
* options.
* @param {Object} [options] Object with width/height properties
*/
_setWidthHeight: function(options) {
options || (options = { });
var el = this.getElement();
this.width = options.width || el.naturalWidth || el.width || 0;
this.height = options.height || el.naturalHeight || el.height || 0;
},
/**
* Calculate offset for center and scale factor for the image in order to respect
* the preserveAspectRatio attribute
* @private
* @return {Object}
*/
parsePreserveAspectRatioAttribute: function() {
var pAR = fabric.util.parsePreserveAspectRatioAttribute(this.preserveAspectRatio || ''),
rWidth = this._element.width, rHeight = this._element.height,
scaleX = 1, scaleY = 1, offsetLeft = 0, offsetTop = 0, cropX = 0, cropY = 0,
offset, pWidth = this.width, pHeight = this.height, parsedAttributes = { width: pWidth, height: pHeight };
if (pAR && (pAR.alignX !== 'none' || pAR.alignY !== 'none')) {
if (pAR.meetOrSlice === 'meet') {
scaleX = scaleY = fabric.util.findScaleToFit(this._element, parsedAttributes);
offset = (pWidth - rWidth * scaleX) / 2;
if (pAR.alignX === 'Min') {
offsetLeft = -offset;
}
if (pAR.alignX === 'Max') {
offsetLeft = offset;
}
offset = (pHeight - rHeight * scaleY) / 2;
if (pAR.alignY === 'Min') {
offsetTop = -offset;
}
if (pAR.alignY === 'Max') {
offsetTop = offset;
}
}
if (pAR.meetOrSlice === 'slice') {
scaleX = scaleY = fabric.util.findScaleToCover(this._element, parsedAttributes);
offset = rWidth - pWidth / scaleX;
if (pAR.alignX === 'Mid') {
cropX = offset / 2;
}
if (pAR.alignX === 'Max') {
cropX = offset;
}
offset = rHeight - pHeight / scaleY;
if (pAR.alignY === 'Mid') {
cropY = offset / 2;
}
if (pAR.alignY === 'Max') {
cropY = offset;
}
rWidth = pWidth / scaleX;
rHeight = pHeight / scaleY;
}
}
else {
scaleX = pWidth / rWidth;
scaleY = pHeight / rHeight;
}
return {
width: rWidth,
height: rHeight,
scaleX: scaleX,
scaleY: scaleY,
offsetLeft: offsetLeft,
offsetTop: offsetTop,
cropX: cropX,
cropY: cropY
};
}
});
/**
* Default CSS class name for canvas
* @static
* @type String
* @default
*/
fabric.Image.CSS_CANVAS = 'canvas-img';
/**
* Alias for getSrc
* @static
*/
fabric.Image.prototype.getSvgSrc = fabric.Image.prototype.getSrc;
/**
* Creates an instance of fabric.Image from its object representation
* @static
* @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 object = fabric.util.object.clone(_object);
fabric.util.loadImage(object.src, function(img, isError) {
if (isError) {
callback && callback(null, true);
return;
}
fabric.Image.prototype._initFilters.call(object, object.filters, function(filters) {
object.filters = filters || [];
fabric.Image.prototype._initFilters.call(object, [object.resizeFilter], function(resizeFilters) {
object.resizeFilter = resizeFilters[0];
fabric.util.enlivenObjectEnlivables(object, object, function () {
var image = new fabric.Image(img, object);
callback(image, false);
});
});
});
}, null, object.crossOrigin);
};
/**
* Creates an instance of fabric.Image from an URL string
* @static
* @param {String} url URL to create an image from
* @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument). Second argument is a boolean indicating if an error occurred or not.
* @param {Object} [imgOptions] Options object
*/
fabric.Image.fromURL = function(url, callback, imgOptions) {
fabric.util.loadImage(url, function(img, isError) {
callback && callback(new fabric.Image(img, imgOptions), isError);
}, null, imgOptions && imgOptions.crossOrigin);
};
/* _FROM_SVG_START_ */
/**
* List of attribute names to account for when parsing SVG element (used by {@link fabric.Image.fromElement})
* @static
* @see {@link http://www.w3.org/TR/SVG/struct.html#ImageElement}
*/
fabric.Image.ATTRIBUTE_NAMES =
fabric.SHARED_ATTRIBUTES.concat(
'x y width height preserveAspectRatio xlink:href crossOrigin image-rendering'.split(' ')
);
/**
* Returns {@link fabric.Image} instance from an SVG element
* @static
* @param {SVGElement} element Element to parse
* @param {Object} [options] Options object
* @param {Function} callback Callback to execute when fabric.Image object is created
* @return {fabric.Image} Instance of fabric.Image
*/
fabric.Image.fromElement = function(element, callback, options) {
var parsedAttributes = fabric.parseAttributes(element, fabric.Image.ATTRIBUTE_NAMES);
fabric.Image.fromURL(parsedAttributes['xlink:href'], callback,
extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes));
};
/* _FROM_SVG_END_ */
})(typeof exports !== 'undefined' ? exports : this);