XMLHttpRequestから画像を取得して表示する

Question

私にはこの（jpeg）画像を与えるこのWebサービスがあります。残念ながら

obj = {}; 

    obj.xmlDoc = new window.XMLHttpRequest(); 
    obj.xmlDoc.open("GET", "/cgi-bin/mjpegcgi.cgi?x=1",false, "admin", "admin"); 
    obj.xmlDoc.send(""); 

    obj.oCanvas = document.getElementById("canvas-processor"); 
    obj.canvasProcessorContext = obj.oCanvas.getContext("2d"); 

    obj.base64Img = window.btoa(unescape(encodeURIComponent(obj.xmlDoc.responseText))); 

    obj.img = new Image(); 
    obj.src = 'data:image/jpeg;base64,' + obj.base64Img; 
    obj.img.src = obj.src 
    obj.canvasProcessorContext.drawImage(obj.img,0,0); 

、コードのこの部分が動作しません。：私が欲しいのは、この画像を撮るデータURIに変換し、そのように、HTML5のキャンバス上に表示されます画像はキャンバスに塗られていません（プラス幅と高さ= 0のようですが、正しくデコードできないのでしょうか？例外はありません）。 img.srcはdata:image/jpeg;base64,77+977+977+977+9ABBKRklG....

がを解決次のようになります。

req.overrideMimeType('text/plain; charset=x-user-defined'); 

とで応答タイプを設定します：

req.responseType = 'arraybuffer'; 

（thisを参照してください私はとMIMEタイプをオーバーライドしているはず判明します。応答タイプを変更する場合は、非同期要求を行う必要があります）。

Answer 1

最初にimg要素（非表示）を作成する必要があります img要素でonloadイベントを聴いている点を除いて、これまでと全く同じことを行います。 このイベントが開始されると、キャンバスを同じサイズに設定できるように写真の幅と高さを取得できます。

最後の行と同じようにイメージを描くことができます。