scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-06 04:42:15 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement CORS support on Raster.

Browse source 
Closes #754
This commit is contained in:
Jürg Lehni 2015-08-20 19:14:33 +02:00
parent 0436b2749a
commit 650bf5d616
1 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/item/Raster.js
View file

@ -26,6 +26,7 @@ var Raster = Item.extend(/** @lends Raster# */{
_boundsGetter: 'getBounds', _boundsGetter: 'getBounds',
_boundsSelected: true, _boundsSelected: true,
_serializeFields: { _serializeFields: {
crossOrigin: null, // NOTE: Needs to be set before source to work!
source: null source: null
}, },
@ -113,6 +114,7 @@ var Raster = Item.extend(/** @lends Raster# */{
copyCanvas.getContext('2d').drawImage(canvas, 0, 0); copyCanvas.getContext('2d').drawImage(canvas, 0, 0);
copy.setImage(copyCanvas); copy.setImage(copyCanvas);
} }
copy._crossOrigin = this._crossOrigin;
return this._clone(copy, insert); return this._clone(copy, insert);
}, },
@ -327,6 +329,7 @@ var Raster = Item.extend(/** @lends Raster# */{
setSource: function(src) { setSource: function(src) {
var that = this, var that = this,
crossOrigin = this._crossOrigin,
image; image;
function loaded() { function loaded() {
@ -340,9 +343,10 @@ var Raster = Item.extend(/** @lends Raster# */{
} }
/*#*/ if (__options.environment == 'browser') { /*#*/ if (__options.environment == 'browser') {
// src can be an URL or a DOM ID to load the image from // src can be an URL or a DOM ID to load the image from
image = document.getElementById(src) || new Image(); image = document.getElementById(src) || new Image();
if (crossOrigin)
image.crossOrigin = crossOrigin;
// IE has naturalWidth / Height defined, but width / height set to 0 // IE has naturalWidth / Height defined, but width / height set to 0
// when the image is invisible in the document. // when the image is invisible in the document.
if (image.naturalWidth && image.naturalHeight) { if (image.naturalWidth && image.naturalHeight) {
@ -359,6 +363,8 @@ var Raster = Item.extend(/** @lends Raster# */{
this.setImage(image); this.setImage(image);
/*#*/ } else if (__options.environment == 'node') { /*#*/ } else if (__options.environment == 'node') {
image = new Image(); image = new Image();
if (crossOrigin)
image.crossOrigin = crossOrigin;
// If we're running on the server and it's a string, // If we're running on the server and it's a string,
// check if it is a data URL // check if it is a data URL
if (/^data:/.test(src)) { if (/^data:/.test(src)) {
@ -394,6 +400,34 @@ var Raster = Item.extend(/** @lends Raster# */{
/*#*/ } // __options.environment == 'node' /*#*/ } // __options.environment == 'node'
}, },
/**
* The crossOrigin value to be used when loading the image resource, in
* order to support CORS. Note that this needs to be set before setting the
* {@link #source} property in order to always work (e.g. when the image is
* cached in the browser).
*
* @bean
* @type String
*
* @example {@paperscript}
* var raster = new Raster({
* crossOrigin: 'anonymous',
* source: 'http://assets.paperjs.org/images/marilyn.jpg',
* position: view.center
* });
*
* console.log(view.element.toDataURL('image/png').substring(0, 32));
*/
getCrossOrigin: function() {
return this._image && this._image.crossOrigin || this._crossOrigin || '';
},
setCrossOrigin: function(crossOrigin) {
this._crossOrigin = crossOrigin;
if (this._image)
this._image.crossOrigin = crossOrigin;
},
// DOCS: document Raster#getElement // DOCS: document Raster#getElement
getElement: function() { getElement: function() {
// Only return the internal element if the content is actually ready. // Only return the internal element if the content is actually ready.