3

私が持っているとしましょう<img/>。この img にはsrc='http://somelocation/getmypic'. 後で、バイナリ データを受け取る ajax 呼び出しに基づいて img の内容を変更したい場合があります。画像に適用するかどうかは、ajax コールバックでデータを受け取って初めてわかります。私はしないと決めるかもしれません。

私が行った調査からわかる限り、img にバイナリ データを設定する唯一の方法は、バイナリ データを base64 エンコードし、img src を結果の base 64 エンコード文字列に設定することです。

私の最初の主な質問は、オーバーヘッドとは何ですか? これは、画像ダウンロードの処理とメモリ使用量が 3 倍になったことを意味するのではないですか? 私のajaxコールバックは、メモリにロードされたバイナリデータを取得し、次にバイナリストリームをベース64でエンコードし、ブラウザはこのストリームをデコードしてバイナリに戻しますか? それとも、何かが足りないのですが、実際にはそれほど悪くはありませんか?

私の 2 番目の質問は、base64 エンコーディングなしでバイナリ データを img に直接設定する方法がないのはなぜですか? 私が使用したほとんどの UI 言語では、ファイルから「PictureBox」(たとえば ) に画像をロードしたり、「PictureBox」に描画したりできます。これが img で許可されないのはなぜですか? 私は src を「バイナリ」またはそのようなものに設定する img.binary=bytes を考えています。この機能は img と canvas に分割されているようですが、両方を実行したい場合もあります。私の理解に何かが欠けているのではないかと思っています (たとえば、バイナリ データを img に直接設定できないようにすることには、設計または実装上の利点があります)。

ありがとうございました。

4

1 に答える 1

2

さて、これが私が思いついたものです。パフォーマンスやメモリ使用量はわかりませんが、base64 エンコーディングよりもはるかに簡単で、asp.net MVC FileStreamResult で動作します。だから、他の誰かに役立つ場合に備えて、ここに投稿すると思いました：

 var oReq = new XMLHttpRequest();
    oReq.open("post", '/somelocation/getmypic', true );        
    oReq.responseType = "blob";
    oReq.onload = function ( oEvent )
    {
        var blob = oReq.response;
        var imgSrc = URL.createObjectURL( blob );                        
        var $img = $( '<img/>', {                
            "alt": "test image",
            "src": imgSrc
        } ).appendTo( $( '#bb_theImageContainer' ) );
        window.URL.revokeObjectURL( imgSrc );
    };
    oReq.send( null );

基本的な考え方は、データは改ざんされておらず、ブロブとして受信されるというものです。そのブロブの URL が作成されます (これは基本的に、URL を使用してメモリ内のそのブロブにアクセスできることを意味すると思います)。しかし、良いことは、img src をこれに設定できることです。これは素晴らしいことです。

この答えは私を正しい軌道に乗せ、次にこのページとこのページをmdnに置きました。サポートされているブラウザに注意してください。

于 2013-10-30T11:16:39.613 に答える