2

悲しいことに、私は無数の同様の質問を目にしますが、私の状況に特有の回答はありません. 私はjqueryを使用していません。最新のブラウザー (特に Chrome) 以外は気にしません。PNG または JPG ファイルのクロスドメイン フェッチから JavaScript イメージをロードする方法を探しています。

つまり、これをやりたいだけです：

var img1 = new Image();
img1.addEventListener('load', function() { imageLoaded( canvas, context, this); }, false)
img1.src = textureUrl;

これは同じドメインでうまく機能します。ただし、どうやらそれにはリクエスト ヘッダーに Origin タグが含まれていないため、サーバーで CORS ヘッダーを正常にセットアップしたとしても、クロスドメイン環境では機能しません。そのヘッダーを含めるためにこのリクエストに対してできる簡単なことがあれば、それは素晴らしいことです。

しかし、私がしなければならないことは、XHR を使用してアセットの非同期フェッチを行い、バイナリ データを取得してから、何らかの方法でそのデータを通常の Image() オブジェクトに押し込むことです。さまざまな形式のデータを正常に取得できたと思いますが (arraybuffer と blob を試しました)、Image() オブジェクトに詰め込むことはできませんでした。

例えば：

var img3 = new Image();
var req = new window.XMLHttpRequest();
req.overrideMimeType('text/plain; charset=x-user-defined');  // seems to make no difference
req.responseType = 'arraybuffer';  // no joy with arraybuffer or blob
req.open("GET", textureUrl, true, "", "");  // async request allows CORS preflight exchange

req.onreadystatechange = function (oEvent) {
  if (req.readyState === 4) {
    if (req.status === 200) {
        alert( "XHR worked" );
        if( req.response ) {
          alert( "resp text: " + req.response );  // identifies response as arraybuffer or blob
        }

        // I believe this section is where I need the most help.

        // var base64Img = window.btoa(unescape(encodeURIComponent( req.responseText)) );

        var base64Img = window.btoa( unescape( encodeURIComponent( req.response ) ) );
        alert( "b64: " +  base64Img );  // vaguely uu64ish, but truncated
        var src = "";
        if( isPng == 1 ) {  // just to indicate the src url is built differently for jpg.
            alert("png");
            src = 'data:image/png;base64,' + base64Img;
        } 

        ....
        img3.src = src;  // img3 loads fine if I just jam a same domain url here

  <closing braces>

私が読んだことから、arraybufferを指定した場合、MIMEタイプをオーバーライドする必要があるかどうかは明確ではありませんが、私には明確ではありません。

データが返されました (クロスドメイン エラーは発生しませんでした)。サイズはほぼ正しいように見えますが、uu64 エンコードに成功したか、適切なデータ URL を画像に詰め込んでいるとは確信していません。

繰り返しますが、これは最新の Chrome ブラウザーで動作する場合にのみ必要であり、可能な限り「純粋な HTML5」になりたいので、IE7 などで動作する必要はないと感じています。

req.response に HTTP 応答の最初の行が含まれているかどうかはわかりません (つまり、uuencode する前に何かをトリミングするのは私の責任です...)

あなたが私の目から羊毛を引っ張ってくれることを願っています！

前もって感謝します。

4

2 に答える 2

0

私はしばらく同じ問題に行き詰まりました。これを機能させるために必要なことは次のとおりです。

zip/png などの形式の場合は、次を使用する必要があります。

req.responseType = 'arraybuffer';

トリッキーなことはの場合ですarraybuffer、req.responseText動作しませんが、代わりに使用しますreq.response

var base64Img = window.btoa(
  unescape(
    encodeURIComponent(req.response)
  )
);
于 2015-08-03T10:40:04.463 に答える