8

WebSocket（C＃アプリから）を介して送信されるバイトを画像に変換する方法を知っている人はいますか？次に、キャンバスに画像を描きたいと思います。私はこれを行う2つの方法を見ることができます：

  • どういうわけか、それを変換せずにバイト形式でキャンバスに画像を描画します。
  • javascriptでバイトをbase64文字列に変換してから描画します。

描画用のバイトを受け取る私の関数は次のとおりです。 

function draw(imgData) {

    var img=new Image();
    img.onload = function() {
        cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

// What I was using before...
img.src = "data:image/jpeg;base64,"+imgData;

}

以前はすでにbase64文字列として変換された画像を受け取っていましたが、バイトの送信サイズが小さい（30％小さい？）ことを知った後、これを機能させたいと思います。また、画像はjpegです。

誰かが私がそれをする方法を知っていますか？助けてくれてありがとう。:)

4

2 に答える 2

4

画像が実際にすでにjpegである場合は、受信したデータをbase64ストリームに変換するだけです。FirefoxとWebkitブラウザ（私が覚えているように）には特定の機能がありbtoa()ます。入力文字列をbase64でエンコードされた文字列に変換します。その対応物は、そのatob()逆です。

次のように使用できます。

function draw(imgData){
    var b64imgData = btoa(imgData); //Binary to ASCII, where it probably stands for
    var img = new Image();
    img.src = "data:image/jpeg;base64," + b64imgData;
    document.body.appendChild(img); //or append it to something else, just an example
}

ターゲットとするブラウザ（たとえば、IE）がFirefoxまたはWebkitのものでない場合は、インターネット上にある複数の変換機能の1つを使用できます（良いものです。複数のブラウザでのパフォーマンスの統計も提供します。再興味:)

于 2012-08-20T18:23:45.950 に答える
4

私は最後にこれを使用しました：

function draw(imgData, frameCount) {
    var r = new FileReader();
    r.readAsBinaryString(imgData);
    r.onload = function(){ 
        var img=new Image();
        img.onload = function() {
            cxt.drawImage(img, 0, 0, canvas.width, canvas.height);
        }
        img.src = "data:image/jpeg;base64,"+window.btoa(r.result);
    };
}

btoa（）を使用する前に、バイトを文字列に読み込む必要がありました。

于 2012-08-27T12:58:32.053 に答える