three.js（canvas/webGL）的跨域图像，代理？答案

【问题标题】：cross-domain image for three.js (canvas/webGL), proxy?three.js（canvas/webGL）的跨域图像，代理？
【发布时间】：2013-07-17 21:18:12
【问题描述】：

我意识到这可能是不可能的......我一直在四处寻找并尝试不同的东西无济于事，但我认为在放弃之前可能值得发帖......

我正在构建一个使用 three.js (webGL) 的应用程序，我想让用户可以选择输入网络上任何图像的 URL，并使用它来纹理网络应用程序中的 3D 对象.如果不是整个跨域安全问题，这将没有问题。

我知道对于 CORS 批准的图像应该有一些解决方法，虽然我不完全理解这一点，但我的印象是这必须在主机端设置（而且我的用户需要能够拉来自网络上任何地方的图像并将其用作纹理）>>我已经尝试过：https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/ ...但它不起作用（可能是由于我对“CORS 批准”的构成有误解）

我认为也许做某种 php 代理可能会起作用？我试过这个：http://benalman.com/code/projects/php-simple-proxy/docs/files/ba-simple-proxy-php.html ...但似乎也没有运气。（它可能不是为处理图像而编写的......我遇到了 MIME 类型错误......当我稍微修改了一下，设法摆脱了这个错误......但仍然没有运气）

...希望有人能提供帮助！

【问题讨论】：

您可以随时从其他服务器下载图像然后使用它。

标签： image proxy cross-domain three.js webgl

【解决方案1】：

我发现使用 THREE.ImageUtils.loadTexture 函数时，对于three.js，WebGL+CORS 对我不起作用。

此代码确实对我有用（注意：corsproxy.com 与尼克回答中的 PHP 相同）

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;

【讨论】：

【解决方案2】：

尤里卡！！！像代理一样的 loox 是要走的路，这成功了:)

<?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);

?>

【讨论】：