cross-domain image for three.js (canvas/webGL), proxy?

Question

I realize this may not be possible... I've been scouring around and trying out different things to no avail, but I thought it might merit a post before giving up...

I'm putting together an app that uses three.js (webGL) and I would like to give the user the option to input a URL to any image on the web and use that to texture a 3D object in the web app. This would be no problem if not for the whole cross-domain security issue.

I know there are supposed to be some work arounds for CORS approved images, though I don't entirely understand this, it's my impression this has to be set on the host's end (and my users need to be able to pull an image from anywhere on the web and use it at as texture) >> I've tried this: https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ ...but it didn't work (probably due to my misunderstanding of what constitutes "CORS approved" )

I thought that maybe doing some kind of php proxy might work? I tried this: http://benalman.com/code/projects/php-simple-proxy/docs/files/ba-simple-proxy-php.html ...but also didn't seem to have any luck. (it may not have been written to work with images... I was getting MIME type errors... and when I hacked around a bit managed to get rid of the error... but still no luck)

...hope someone out there can help!

Answer 1

I found that for three.js WebGL+CORS didn't work for me when using the THREE.ImageUtils.loadTexture function.

This code did work for me though (Note: corsproxy.com does the same as the PHP in Nick's answer)

var url = 'http://www.corsproxy.com/yourdomain/yourfolder/yourimage.png';    
var image = document.createElement('img');
image.crossOrigin = '';
image.src = url;
var texture = new THREE.Texture(image);
texture.needsUpdate = true;
material.map = texture;

Answer 2

EUREKA!!! loox like proxy's the way to go, this did the trick :)

<?php
// PHP Proxy
// Responds to both HTTP GET and POST requests
//
// Author: Abdul Qabiz
// March 31st, 2006
//

// Get the url of to be proxied
// Is it a POST or a GET?
$url = ($_POST['url']) ? $_POST['url'] : $_GET['url'];
$headers = ($_POST['headers']) ? $_POST['headers'] : $_GET['headers'];
$mimeType =($_POST['mimeType']) ? $_POST['mimeType'] : $_GET['mimeType'];


//Start the Curl session
$session = curl_init($url);

// If it's a POST, put the POST data in the body
if ($_POST['url']) {
    $postvars = '';
    while ($element = current($_POST)) {
        $postvars .= key($_POST).'='.$element.'&';
        next($_POST);
    }
    curl_setopt ($session, CURLOPT_POST, true);
    curl_setopt ($session, CURLOPT_POSTFIELDS, $postvars);
}

// Don't return HTTP headers. Do return the contents of the call
curl_setopt($session, CURLOPT_HEADER, ($headers == "true") ? true : false);

curl_setopt($session, CURLOPT_FOLLOWLOCATION, true); 
//curl_setopt($ch, CURLOPT_TIMEOUT, 4); 
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

// Make the call
$response = curl_exec($session);

if ($mimeType != "")
{
    // The web service returns XML. Set the Content-Type appropriately
    header("Content-Type: ".$mimeType);
}

echo $response;

curl_close($session);

?>