Add support for relative (local) URLs on Node.js

This commit is contained in:
Jürg Lehni 2016-04-04 23:26:43 -07:00
parent f4e4e7ab9c
commit 7cf844886f
5 changed files with 28 additions and 16 deletions

View file

@ -27,3 +27,7 @@ raster.onLoad = function() {
console.log('saved png'); console.log('saved png');
}); });
}; };
raster.onError = function(message) {
console.error(message);
};

View file

@ -6,7 +6,7 @@ var path = require('path');
var fs = require('fs'); var fs = require('fs');
paper.setup(new paper.Size(300, 600)); paper.setup(new paper.Size(300, 600));
paper.project.importSVG('file://' + path.resolve('./in.svg'), { paper.project.importSVG('in.svg', {
onLoad: function(item) { onLoad: function(item) {
paper.view.exportFrames({ paper.view.exportFrames({
amount: 1, amount: 1,

View file

@ -292,6 +292,12 @@ var PaperScope = Base.extend(/** @lends PaperScope# */{
delete PaperScope._scopes[this._id]; delete PaperScope._scopes[this._id];
}, },
resolvePath: function(url) {
// On Node.js, resolve relative URLs to local files:
return this.agent.node && !/^(?:[a-z]+:)?\/\//i.test(url)
? 'file://' + require('path').resolve(url) : url;
},
statics: new function() { statics: new function() {
// Produces helpers to e.g. check for both 'canvas' and // Produces helpers to e.g. check for both 'canvas' and
// 'data-paper-canvas' attributes: // 'data-paper-canvas' attributes:

View file

@ -82,12 +82,14 @@ var Raster = Item.extend(/** @lends Raster# */{
// Otherwise we need to check the type of object: // Otherwise we need to check the type of object:
if (!this._initialize(object, if (!this._initialize(object,
position !== undefined && Point.read(arguments, 1))) { position !== undefined && Point.read(arguments, 1))) {
if (typeof object === 'string') { // object can be an image, canvas, URL or DOM-ID:
// Both data-urls and normal urls are supported here! var image = typeof object === 'string'
this.setSource(object); ? document.getElementById(object) : object;
} else { if (image) {
// #setImage() handles both canvas and image types. // #setImage() handles both canvas and image types.
this.setImage(object); this.setImage(image);
} else {
this.setSource(object);
} }
} }
if (!this._size) { if (!this._size) {
@ -367,14 +369,11 @@ var Raster = Item.extend(/** @lends Raster# */{
}, },
setSource: function(src) { setSource: function(src) {
var crossOrigin = this._crossOrigin, image = new window.Image();
// src can be an URL or a DOM ID to load the image from: image.src = paper.resolvePath(src);
image = document.getElementById(src) || new window.Image(); var crossOrigin = this._crossOrigin;
if (crossOrigin) if (crossOrigin)
image.crossOrigin = crossOrigin; image.crossOrigin = crossOrigin;
// A new image created above? Set the source now.
if (!image.src)
image.src = src;
this.setImage(image); this.setImage(image);
}, },
@ -397,13 +396,15 @@ var Raster = Item.extend(/** @lends Raster# */{
* console.log(view.element.toDataURL('image/png').substring(0, 32)); * console.log(view.element.toDataURL('image/png').substring(0, 32));
*/ */
getCrossOrigin: function() { getCrossOrigin: function() {
return this._image && this._image.crossOrigin || this._crossOrigin || ''; var image = this._image;
return image && image.crossOrigin || this._crossOrigin || '';
}, },
setCrossOrigin: function(crossOrigin) { setCrossOrigin: function(crossOrigin) {
this._crossOrigin = crossOrigin; this._crossOrigin = crossOrigin;
if (this._image) var image = this._image;
this._image.crossOrigin = crossOrigin; if (image)
image.crossOrigin = crossOrigin;
}, },
// DOCS: document Raster#getElement // DOCS: document Raster#getElement

View file

@ -14,7 +14,8 @@ var Http = {
request: function(options) { request: function(options) {
// Code borrowed from Coffee Script and extended: // Code borrowed from Coffee Script and extended:
var xhr = new window.XMLHttpRequest(); var xhr = new window.XMLHttpRequest();
xhr.open((options.method || 'get').toUpperCase(), options.url, xhr.open((options.method || 'get').toUpperCase(),
paper.resolvePath(options.url),
Base.pick(options.async, true)); Base.pick(options.async, true));
if (options.mimeType) if (options.mimeType)
xhr.overrideMimeType(options.mimeType); xhr.overrideMimeType(options.mimeType);