2012-03-07 6 views
5

編集: を考慮にdennmatの提案を取って、私はImage()を使用して数行までスクリプトを取得し、私の画像を簡単にするために管理している:XDomainRequestを使用してバイナリデータを正しく読み取ることはできますか?

window.onload = function(){ 
    var img; 
    capture_canvas   = document.createElement('canvas'); 
    capture_canvas.width = 1000; 
    capture_canvas.height = 1000; 
    document.documentElement.appendChild(capture_canvas); 
    img = new Image(); 
    img.crossOrigin = "Anonymous";   
    img.src = "http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/users/1196739508/post/41-1330377498/41-1330377498_thumb.jpg"; 
    img.onload = function() { 
     var context, canvas_img; 
     context = capture_canvas.getContext('2d'); 
     context.drawImage(img, 0, 0, 255, 255); 
     canvas_img = context.getImageData(0, 0, capture_canvas.width, capture_canvas.height); 
    } 
} 

これはChromeとFirefoxのために動作しますが、これはIE9のためにしません。次のリンクに記載されている解決策はこのような状況には当てはまりません。 Uncaught Error: SECURITY_ERR: DOM Exception 18 when I try to set a cookie

Image()のcors機能はIE9でサポートされていますか?


私はちょっとした問題に遭遇しました。

http://www.shangalulu.com/get_resource_no_64.php?url=http://www.shangalulu.com/resources/images/sample/sample.png

上記画像は、実際には0まで255から行く255バイト(2回)、続いて、標準的なPNG形式のヘッダーを含むファイルです。このアイデアは、Internet Explorer 9がAJAXリクエストを介してバイナリデータを受け取る方法を確認することでした。

これは私の問題です:私は127より大きいクライアント上のバイトを受け取ったとき、値はデフォルトで253になっています。IEに拡張バイトを正しいものと読み込ませる方法はありますか値?

のノートを取るためにいくつかのこと:私たちは、JavaScriptのフレームワークの任意の並べ替えを使用していない

1)。これは、私たちが裸の骨のjavascriptでのみ行う必要があります。

2)この実験の目的は、画像を得るためのきれいな方法を作り、それを汚すことなくキャンバスに置くことです。時にはこれらのイメージは外部からホストされているイメージサーバーから来ますが、他のホストからは私たちが制御できない場合もあります。以下に添付

は私のテストスクリプトです:

残念ながら
var request; 
window.onload = function(){ 
    request = new XMLHttpRequest(); 
    if (window.XDomainRequest) { 
     request = new XDomainRequest(); 
    } 
    request.open('GET', 
     "http://www.shangalulu.com/get_resource_no_64.php?url= 
     http://www.shangalulu.com/resources/images/sample/sample.png", true); 
    request.onload = function() 
    { 
     var binary, i, response; 
     response = this.responseText; 
     binary = ""; 
     if (this.contentType) 
     { 
      document.documentElement.appendChild(
       document.createTextNode(this.contentType)); 
      document.documentElement.appendChild(document.createElement('br')); 
     } 
     for(i=0; i < response.length; i++) { 
      binary = "Line " + (i) + " --> " + ((response.charCodeAt(i)) & 0xff); 
      document.documentElement.appendChild(document.createTextNode(binary)); 
      document.documentElement.appendChild(document.createElement('br')); 
     } 
    }; 
    request.send(); 
} 
+1

'Image()'の何が問題なのですか?例を参照してください:https://developer.mozilla.org/en/Canvas_tutorial/Using_images – dennmat

+0

あなたは本質的に、組み込みのブラウザを使わずにJSで画像データを操作、管理、描画しようとしています。それのためのユーティリティ。それは本当に遅くなるでしょう、そして、あなたが透明性と回転に入ると、特に無数の問題に遭遇するでしょう。 – dennmat

+0

Image()を最後に見たときにクロスオリジンサポートを見逃しているに違いありません。ヒントをありがとう! 私の足を撃たれたとして、私はブラウザの内蔵ユーティリティが何を意味するかは完全にはわかりません。私がここでやろうとしているのは、単純なイメージをキャンバスにレンダリングしてサーバーに送信することだけです。 – Axle

答えて

5

、「匿名」に設定crossOriginプロパティで画像を使用して()オブジェクトは、静止画像がその上に描かれた後、IEはキャンバスを汚染チェックしていました。

は、この問題を回避するために、私は次のようでした:
  1. は私がURLを受け入れる私のサーバー上の小さなスクリプトを作成し、それに与えられたURLを使用して)(のfile_get_contentsを呼び出します。このスクリプトの誤用を防ぐために、私は「受け入れ可能な」ドメインのリストを追加しただけでなく、要求されるべきものを指すように結果のURLを調整しました。これにより、ローカルでリクエストを行うことができます。つまり、XDomainRequestオブジェクトの代わりにXMLHttpRequestオブジェクトを使用できます。 (これもIE7をサポートするための扉を開く)。 IEはATOBをサポートしていないので

  2. 、私はここで見つけるBASE64変換スクリプトを使用:How can you encode a string to Base64 in JavaScript? 私は文字の実際の文字列データがバイナリーだったとして、encode機能でinput = Base64._utf8_encode(input);をコメントアウトし、ではありません。

この解決法は、「最後の手段」です。それは動作しますが、それは非常に遅いです(通常の3秒の代わりに3分かかります)。それの最悪の部分は、IEにカスタムダイアログボックスとそのプログレスバーを適切にレンダリングする機会を与えるタイマーを追加する必要がありました。タイマーは、IEに次の要求を行う前に一時停止させる。これは、私が要求を非同期的に行うように設定したことを考えると、むしろ奇妙なことです。

これは私が今のところ思いついた最高のものです。他の誰かが仕事を終わらせる良い方法があれば、あなたの答えを投稿してください。

関連する問題