Question

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

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

我知道应该为CORS批准的图像做一些工作，虽然我不完全理解这一点，但我的印象是必须在主机端设置（我的用户需要能够拉出一个来自网络上任何地方的图像并将其用作纹理）＆gt;＆gt;我试过这个：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类型的错误......当我有点乱砍时设法摆脱错误......但仍然没有运气）

...希望那里的人可以提供帮助！

Answer 1

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

这段代码确实适用于我（注意：corsproxy.com和Nick的答案中的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;

Answer 2

EUREKA !!!像代理一样的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);

?>

三个.js（canvas / webGL），代理的跨域图像？

2 个答案: