How to display a locally selected image in three.js?

Question

I always get a cross-origin-error. how can I circumvent this, or better yet, fix it? I need the user to be able to pic a local image and let it be displayed in a PlaneGeometry.

my code:

this.reader.readAsDataURL(file);
this.reader.onloadend = function( ev ) {
var file = ev.target.result,
//geometry = new THREE.CubeGeometry(1, 1, 0.1),
geometry = new THREE.PlaneGeometry(1, 1, 1, 2),
texture = THREE.ImageUtils.loadTexture(file),
material = new THREE.MeshBasicMaterial({ map: texture }),
mesh = new THREE.Mesh(geometry, material);
mesh.name = "Marker" + mesh.id;
mesh.rotation.x = 90 * ( Math.PI / 180 );
Editor.addObject(mesh);
console.log(Editor.scene.children);
SignalHub.signals.updateScene.dispatch();
SignalHub.signals.markerAdded.dispatch();

The geometry shows up but it's blank!

Answer 1

Option 1

Use an img.

var image = document.createElement( 'img' );
image.src = dataurl;

var texture = new THREE.Texture( image );
texture.needsUpdate = true;

See here.

Option 2

Where is the html server from? If it is a local htm file, then you could instead serve it from a web server on the local machine (e.g. IIS / apache).

Whether the server is local or remote, you can upload the image to your web server when they have selected it and use a URL to retrieve it from the web server. This will satisfy the cross-origin policies.

Option 3

1. Convert the image into Base64 text
2. Store it in an external Javascript file
3. Link it to your project page
4. Load it into your texture

See here (SO answer) and here (details off-site).

Option 4

Create a shortcut for the browser such as:

c:// ... /chrome.exe --allow-file-access-from-files

Option 5

Use the .crossOrigin = '' property. It was not working, but I think it is now fixed. See here and here.

Answer 2

I made this example: http://develoteca.com/EjerciosOnline/Exampleplane/, you can load a local image Greetings.