Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-11 15:23:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Load image via fabric.util.loadImage in cloneAsImage. Add fabric.util.createImage helper. Closes #593

Browse source
This commit is contained in:
kangax 2013-04-29 15:16:51 -04:00
parent 69cae53cc8
commit a6a5cb4a54
6 changed files with 54 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
dist/all.js vendored
View file

@ -2167,7 +2167,7 @@ fabric.Collection = {
*/
function loadImage(url, callback, context) {
if (url) {
var img = new Image();
var img = fabric.util.createImage();
/** @ignore */
img.onload = function () {
callback && callback.call(context, img);
@ -2336,6 +2336,18 @@ fabric.Collection = {
return canvasEl;
}
/**
* Creates image element (works on client and node)
* @static
* @memberOf fabric.util
* @return {Image} image element
*/
function createImage() {
return fabric.isLikelyNode
? new (require('canvas').Image)()
: fabric.document.createElement('img');
}
/**
* Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
* @static
@ -2439,6 +2451,7 @@ fabric.Collection = {
fabric.util.populateWithProperties = populateWithProperties;
fabric.util.drawDashedLine = drawDashedLine;
fabric.util.createCanvasElement = createCanvasElement;
fabric.util.createImage = createImage;
fabric.util.createAccessors = createAccessors;
fabric.util.clipContext = clipContext;
fabric.util.multiplyTransformMatrices = multiplyTransformMatrices;
@ -9615,17 +9628,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
return;
}
var Image = global.Image;
try {
var NodeImage = (typeof require !== 'undefined') && require('canvas').Image;
if (NodeImage) {
Image = NodeImage;
}
}
catch(err) {
fabric.log(err);
}
/**
* Root object class from which all 2d shape classes inherit from
* @class fabric.Object
@ -10307,16 +10309,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
*/
cloneAsImage: function(callback) {
if (fabric.Image) {
var i = new Image();
/** @ignore */
i.onload = function() {
if (callback) {
callback(new fabric.Image(i), orig);
}
i = i.onload = null;
};
var orig = {
angle: this.getAngle(),
flipX: this.getFlipX(),
@ -10325,9 +10317,14 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
// normalize angle
this.set({ angle: 0, flipX: false, flipY: false });
this.toDataURL(function(dataURL) {
i.src = dataURL;
this.toDataURL(function(dataUrl) {
fabric.util.loadImage(dataUrl, function(img) {
if (callback) {
callback(new fabric.Image(img), orig);
}
});
});
}
return this;
},
@ -14761,12 +14758,9 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
return;
}
var isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined',
imgEl = this._originalImage,
var imgEl = this._originalImage,
canvasEl = fabric.util.createCanvasElement(),
replacement = isLikelyNode
? new (require('canvas').Image)()
: fabric.document.createElement('img'),
replacement = fabric.util.createImage(),
_this = this;
canvasEl.width = imgEl.width;
@ -14787,7 +14781,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
replacement.width = imgEl.width;
replacement.height = imgEl.height;
if (isLikelyNode) {
if (fabric.isLikelyNode) {
// cut off data:image/png;base64, part in the beginning
var base64str = canvasEl.toDataURL('image/png').substring(22);
replacement.src = new Buffer(base64str, 'base64');

12
dist/all.min.js vendored
View file

File diff suppressed because one or more lines are too long

BIN
dist/all.min.js.gz vendored
View file

Binary file not shown.

9
src/image.class.js
View file

@ -202,12 +202,9 @@
return;
}
var isLikelyNode = typeof Buffer !== 'undefined' && typeof window === 'undefined',
imgEl = this._originalImage,
var imgEl = this._originalImage,
canvasEl = fabric.util.createCanvasElement(),
replacement = isLikelyNode
? new (require('canvas').Image)()
: fabric.document.createElement('img'),
replacement = fabric.util.createImage(),
_this = this;
canvasEl.width = imgEl.width;
@ -228,7 +225,7 @@
replacement.width = imgEl.width;
replacement.height = imgEl.height;
if (isLikelyNode) {
if (fabric.isLikelyNode) {
// cut off data:image/png;base64, part in the beginning
var base64str = canvasEl.toDataURL('image/png').substring(22);
replacement.src = new Buffer(base64str, 'base64');

30
src/object.class.js
View file

@ -12,17 +12,6 @@
return;
}
var Image = global.Image;
try {
var NodeImage = (typeof require !== 'undefined') && require('canvas').Image;
if (NodeImage) {
Image = NodeImage;
}
}
catch(err) {
fabric.log(err);
}
/**
* Root object class from which all 2d shape classes inherit from
* @class fabric.Object
@ -704,16 +693,6 @@
*/
cloneAsImage: function(callback) {
if (fabric.Image) {
var i = new Image();
/** @ignore */
i.onload = function() {
if (callback) {
callback(new fabric.Image(i), orig);
}
i = i.onload = null;
};
var orig = {
angle: this.getAngle(),
flipX: this.getFlipX(),
@ -722,9 +701,14 @@
// normalize angle
this.set({ angle: 0, flipX: false, flipY: false });
this.toDataURL(function(dataURL) {
i.src = dataURL;
this.toDataURL(function(dataUrl) {
fabric.util.loadImage(dataUrl, function(img) {
if (callback) {
callback(new fabric.Image(img), orig);
}
});
});
}
return this;
},

15
src/util/misc.js
View file

@ -171,7 +171,7 @@
*/
function loadImage(url, callback, context) {
if (url) {
var img = new Image();
var img = fabric.util.createImage();
/** @ignore */
img.onload = function () {
callback && callback.call(context, img);
@ -340,6 +340,18 @@
return canvasEl;
}
/**
* Creates image element (works on client and node)
* @static
* @memberOf fabric.util
* @return {Image} image element
*/
function createImage() {
return fabric.isLikelyNode
? new (require('canvas').Image)()
: fabric.document.createElement('img');
}
/**
* Creates accessors (getXXX, setXXX) for a "class", based on "stateProperties" array
* @static
@ -443,6 +455,7 @@
fabric.util.populateWithProperties = populateWithProperties;
fabric.util.drawDashedLine = drawDashedLine;
fabric.util.createCanvasElement = createCanvasElement;
fabric.util.createImage = createImage;
fabric.util.createAccessors = createAccessors;
fabric.util.clipContext = clipContext;
fabric.util.multiplyTransformMatrices = multiplyTransformMatrices;