(function(){ function getAbsolutePath(path) { var isAbsolute = /^https?:/.test(path); if (isAbsolute) return path; var imgEl = document.createElement('img'); imgEl.src = path; var src = imgEl.src; imgEl = null; return src; } var IMG_SRC = getAbsolutePath('../fixtures/test_image.gif'), IMG_WIDTH = 276, IMG_HEIGHT = 110; var REFERENCE_IMG_OBJECT = { 'type': 'image', 'left': 0, 'top': 0, 'width': IMG_WIDTH, 'height': IMG_HEIGHT, 'fill': 'rgb(0,0,0)', 'overlayFill': null, 'stroke': null, 'strokeWidth': 1, 'scaleX': 1, 'scaleY': 1, 'angle': 0, 'flipX': false, 'flipY': false, 'opacity': 1, 'src': IMG_SRC, 'selectable': true } function _createImageObject(width, height) { var elImage = document.createElement('image'); elImage.src = IMG_SRC; elImage.width = width; elImage.height = height; return new fabric.Image(elImage); } function createImageObject() { return _createImageObject(IMG_WIDTH, IMG_HEIGHT) } function createSmallImageObject() { return _createImageObject(IMG_WIDTH / 2, IMG_HEIGHT / 2); } module('fabric.Image'); test('constructor', function() { ok(fabric.Image); var image = createImageObject(); ok(image instanceof fabric.Image); ok(image instanceof fabric.Object); equals(image.get('type'), 'image'); }); test('toObject', function() { var image = createImageObject(); ok(typeof image.toObject == 'function'); same(REFERENCE_IMG_OBJECT, image.toObject()); }); test('toString', function() { var image = createImageObject(); ok(typeof image.toString == 'function'); equals(image.toString(), '#'); }); test('getSrc', function() { var image = createImageObject(); ok(typeof image.getSrc == 'function'); equals(image.getSrc(), IMG_SRC); }); test('getElement', function() { var elImage = document.createElement('image'); var image = new fabric.Image(elImage); ok(typeof image.getElement == 'function'); equals(image.getElement(), elImage); }); test('setElement', function() { var image = createImageObject(); ok(typeof image.setElement == 'function'); var elImage = document.createElement('image'); equals(image.setElement(elImage), image, 'chainable'); equals(image.getElement(), elImage); }); asyncTest('clone', function() { var image = createImageObject(); ok(typeof image.clone == 'function'); var imageClone = null; image.clone(function(clone) { imageClone = clone; }); setTimeout(function() { ok(imageClone instanceof fabric.Image); same(imageClone.toObject(), image.toObject()); start(); }, 1000); }); asyncTest('cloneWidthHeight', function() { var image = createSmallImageObject(); var imageClone = null; image.clone(function(clone) { imageClone = clone; }); setTimeout(function() { equals(imageClone.getElement().width, IMG_WIDTH / 2, 'clone\'s element should have width identical to that of original image'); equals(imageClone.getElement().height, IMG_HEIGHT / 2, 'clone\'s element should have height identical to that of original image'); start(); }, 1000); }); asyncTest('fromObject', function() { ok(typeof fabric.Image.fromObject == 'function'); // should not throw error when no callback is given fabric.Image.fromObject(REFERENCE_IMG_OBJECT); var image; fabric.Image.fromObject(REFERENCE_IMG_OBJECT, function(instance){ image = instance; }); setTimeout(function() { ok(image instanceof fabric.Image); start(); }, 1000); }); asyncTest('fromURL', function() { ok(typeof fabric.Image.fromURL == 'function'); // should not throw error when no callback is given // can't use `assertNothingRaised` due to asynchronous callback fabric.Image.fromURL(IMG_SRC); var image; fabric.Image.fromURL(IMG_SRC, function(instance) { image = instance; }); setTimeout(function() { ok(image instanceof fabric.Image); same(REFERENCE_IMG_OBJECT, image.toObject()); start(); }, 1000); }); test('toGrayscale', function() { var image = createImageObject(), imageEl = document.createElement('img'); imageEl.src = IMG_SRC; image.setElement(imageEl); ok(typeof image.toGrayscale == 'function'); if (!fabric.Canvas.supports('toDataURL')) { alert('toDataURL is not supported. Some tests can not be run.'); } else { equals(image.__isGrayscaled, false); equals(image.toGrayscale(), image, 'chainable'); equals(image.__isGrayscaled, true); } }); asyncTest('fromElement', function() { function makeElement(tagName, attributes) { var element = document.createElement(tagName); for (var prop in attributes) { element.setAttribute(prop, attributes[prop]); } return element; } var IMAGE_DATA_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAARCAYAAADtyJ2fAAAACXBIWXMAAAsSAAALEgHS3X78AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVBJREFUeNqMU7tOBDEMtENuy614/QE/gZBOuvJK+Et6CiQ6JP6ExxWI7bhL1vgVExYKLPmsTTIzjieHd+MZZSBIAJwEyJU0EWaum+lNljRux3O6nl70Gx/GUwUeyYcDJWZNhMK1aEXYe95Mz4iP44kDTRUZSWSq1YEHri0/HZxXfGSFBN+qDEJTrNI+QXRBviZ7eWCQgjsg+IHiHYB30MhqUxwcmH1Arc2kFDwkBldeFGJLPqs/AbbF2dWgUym6Z2Tb6RVzYxG1wUnmaNcOonZiU0++l6C7FzoQY42g3+8jz+GZ+dWMr1rRH0OjAFhPO+VJFx/vWDqPmk8H97CGBUYUiqAGW0PVe1+aX8j2Ll0tgHtvLx6AK9Tu1ZTFTQ0ojChqGD4qkOzeAuzVfgzsaTym1ClS+IdwtQCFooQMBTumNun1H6Bfcc9/MUn4R3wJMAAZH6MmA4ht4gAAAABJRU5ErkJggg=="; ok(typeof fabric.Image.fromElement == 'function', 'fromElement should exist'); var imageEl = makeElement('image', { width: "14", height: "17", "xlink:href": IMAGE_DATA_URL }); var imgObject; fabric.Image.fromElement(imageEl, function(obj) { imgObject = obj; }); setTimeout(function() { ok(imgObject instanceof fabric.Image); same(imgObject.get('width'), 14, 'width of an object'); same(imgObject.get('height'), 17, 'height of an object'); same(imgObject.getSrc(), IMAGE_DATA_URL, 'src of an object'); start(); }, 1000); }); })();