From 630938766599b30f89c429ff620b29d19c03357a Mon Sep 17 00:00:00 2001 From: Andrea Bogazzi Date: Thu, 18 Jan 2018 08:39:02 +0900 Subject: [PATCH] Add CrossOrigin managment to fabric.Pattern (#4618) * added crossOrigin * adding tests * added some basic test --- src/pattern.class.js | 18 +++++++++- test.js | 1 + test/unit/pattern.js | 82 +++++++++++++++++++++++--------------------- 3 files changed, 61 insertions(+), 40 deletions(-) diff --git a/src/pattern.class.js b/src/pattern.class.js index ea4b4cf5..a5d99971 100644 --- a/src/pattern.class.js +++ b/src/pattern.class.js @@ -36,6 +36,21 @@ */ offsetY: 0, + /** + * crossOrigin value (one of "", "anonymous", "use-credentials") + * @see https://developer.mozilla.org/en-US/docs/HTML/CORS_settings_attributes + * @type String + * @default + */ + crossOrigin: '', + + /** + * transform matrix to change the pattern, imported from svgs. + * @type Array + * @default + */ + patternTransform: null, + /** * Constructor * @param {Object} [options] Options object @@ -63,7 +78,7 @@ fabric.util.loadImage(options.source, function(img) { _this.source = img; callback && callback(_this); - }); + }, null, this.crossOrigin); } }, @@ -93,6 +108,7 @@ type: 'pattern', source: source, repeat: this.repeat, + crossOrigin: this.crossOrigin, offsetX: toFixed(this.offsetX, NUM_FRACTION_DIGITS), offsetY: toFixed(this.offsetY, NUM_FRACTION_DIGITS), patternTransform: this.patternTransform ? this.patternTransform.concat() : null diff --git a/test.js b/test.js index 615260df..3c423119 100644 --- a/test.js +++ b/test.js @@ -47,6 +47,7 @@ testrunner.run({ './test/unit/intersection.js', './test/unit/stateful.js' ], + tests: ['./test/unit/pattern.js'], }, function(err, report) { if (err) { console.log(err); diff --git a/test/unit/pattern.js b/test/unit/pattern.js index 855dca69..e7585b58 100644 --- a/test/unit/pattern.js +++ b/test/unit/pattern.js @@ -1,35 +1,20 @@ (function() { var IMG_SRC = fabric.isLikelyNode ? (__dirname + '/../fixtures/greyfloral.png') : '../fixtures/greyfloral.png'; - function createImageElement() { - return fabric.isLikelyNode - ? new (require(fabric.canvasModule).Image)() - : fabric.document.createElement('img'); - } function setSrc(img, src, callback) { - if (fabric.isLikelyNode) { - require('fs').readFile(src, function(err, imgData) { - if (err) { throw err; }; - img.src = imgData; - img._src = src; - callback && callback(); - }); - } - else { - img.src = src; - callback && callback(); - } + img.onload = callback; + img.src = src; } QUnit.module('fabric.Pattern'); - var img = createImageElement(); + var img = fabric.document.createElement('img'); setSrc(img, IMG_SRC); - function createPattern() { + function createPattern(callback) { return new fabric.Pattern({ source: img - }); + }, callback); } QUnit.test('constructor', function(assert) { @@ -41,12 +26,7 @@ QUnit.test('constructor with source string and with callback', function(assert) { var done = assert.async(); function callback(pattern) { - if (fabric.isLikelyNode) { - assert.equal(pattern.source.src, IMG_SRC, 'pattern source has been loaded'); - } - else { - assert.equal(pattern.source.complete, true, 'pattern source has been loaded'); - } + assert.equal(pattern.source.complete, true, 'pattern source has been loaded'); done(); } new fabric.Pattern({ @@ -56,11 +36,11 @@ QUnit.test('properties', function(assert) { var pattern = createPattern(); - assert.equal(pattern.source, img); assert.equal(pattern.repeat, 'repeat'); assert.equal(pattern.offsetX, 0); assert.equal(pattern.offsetY, 0); + assert.equal(pattern.crossOrigin, ''); }); QUnit.test('toObject', function(assert) { @@ -70,13 +50,11 @@ var object = pattern.toObject(); - // node-canvas doesn't give "src" - if (img.src) { - assert.ok(object.source.indexOf('fixtures/greyfloral.png') > -1); - } + assert.ok(object.source.indexOf('fixtures/greyfloral.png') > -1); assert.equal(object.repeat, 'repeat'); assert.equal(object.offsetX, 0); assert.equal(object.offsetY, 0); + assert.equal(object.patternTransform, null); var patternWithGetSource = new fabric.Pattern({ source: function () {return fabric.document.createElement('canvas');} @@ -89,9 +67,40 @@ QUnit.test('toObject with custom props', function(assert) { var pattern = createPattern(); + pattern.patternTransform = [1, 0, 0, 2, 0, 0]; pattern.id = 'myId'; var object = pattern.toObject(['id']); assert.equal(object.id, 'myId'); + assert.deepEqual(object.patternTransform, pattern.patternTransform); + }); + + QUnit.test('toObject with custom props', function(assert) { + var pattern = createPattern(); + pattern.patternTransform = [1, 0, 0, 2, 0, 0]; + pattern.id = 'myId'; + var object = pattern.toObject(['id']); + assert.equal(object.id, 'myId'); + assert.deepEqual(object.patternTransform, pattern.patternTransform); + }); + + QUnit.test('toObject with crossOrigin', function(assert) { + var pattern = new fabric.Pattern({ + source: IMG_SRC, + crossOrigin: 'anonymous' + }); + var object = pattern.toObject(); + assert.equal(object.crossOrigin, 'anonymous'); + }); + + QUnit.test('fromObject with crossOrigin', function(assert) { + var pattern = new fabric.Pattern({ + source: IMG_SRC, + crossOrigin: 'anonymous' + }); + + var object = pattern.toObject(); + var pattern2 = new fabric.Pattern(object); + assert.equal(pattern2.crossOrigin, 'anonymous'); }); QUnit.test('toLive', function(assert) { @@ -128,14 +137,9 @@ var obj = pattern.toObject(); // node-canvas doesn't give "src" - if (obj.src) { - var patternDeserialized = new fabric.Pattern(obj); - assert.equal(typeof patternDeserialized.source, 'object'); - assert.equal(patternDeserialized.repeat, 'repeat'); - } - else { - assert.ok(true); - } + var patternDeserialized = new fabric.Pattern(obj); + assert.equal(typeof patternDeserialized.source, 'object'); + assert.equal(patternDeserialized.repeat, 'repeat'); }); QUnit.test('toSVG', function(assert) {