5

編集：dennmatの提案を考慮して、次を使用して画像取得スクリプトを数行に簡素化することができましたImage()：

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 では機能しません。次のリンクに記載されている解決策は、この状況には当てはまらないようです。キャッチされないエラー: SECURITY_ERR: Cookie を設定しようとすると DOM 例外 18

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

ちょっとした問題が発生しました。

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

上の画像は、実際には標準の png ヘッダーを含むファイルで、その後に 255 バイトから 0 まで (2 回) の 255 バイトが続きます。その目的は、Internet Explorer 9 が AJAX 要求を介して受信したバイナリ データをどのように処理するかを確認することでした。

だから、ここに私の問題があります:クライアントで127より大きいバイトを受信すると、値がデフォルトで253に設定されていることに気付きました.IEに正しい値で拡張バイトを読み取らせる方法はありますか?

注意すべき点がいくつかあります。

1) JavaScript フレームワークは一切使用していません。必要最小限の 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();
}
4

1 に答える 1

5

残念ながら、crossOrigin プロパティを「Anonymous」に設定して Image() オブジェクトを使用すると、IE は、画像がキャンバスに描画されるとキャンバスを汚染します。

これを回避するために、次のことを行いました。

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

  2. IE は atob をサポートしていないため、ここにある base64 変換スクリプトを使用しました: How can you encode a string to Base64 in JavaScript? データはバイナリであり、実際の文字列ではないため、関数内で コメントアウトしinput = Base64._utf8_encode(input);ました。encode

この解決策は、ちょっとした「最後の手段」です。動作しますが、信じられないほど遅いです (通常の 3 秒ではなく 3 分かかります)。最悪の部分は、タイマーを追加して、IE にカスタム ダイアログ ボックスとその進行状況バーを適切にレンダリングする機会を与える必要があったことです。タイマーは、次の要求を行う前に IE を一時停止させます。これは...非同期でリクエストを行うように設定していることを考えると、かなり奇妙です。

これが今のところ私が思いつくことができる最高のものです。他の誰かが仕事を成し遂げるより良い方法を持っている場合は、遠慮なく回答を投稿してください。

于 2012-03-12T18:15:39.587 に答える