0

（jpeg）画像を提供するこのWebサービスを入手しました。私が欲しいのは、この画像を取得し、それをデータURIに変換して、次のようにHTML5キャンバスに表示することです。

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);

残念ながら、このコードは機能しません。画像はキャンバスにまったくペイントされていません（さらに、幅と高さが0のようですが、正しくデコードされない可能性がありますか？例外はありません）。img.srcは次のようになりますdata:image/jpeg;base64,77+977+977+977+9ABBKRklG....

解決済み：mimeタイプを次のようにオーバーライドする必要があることが判明しました：

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

応答タイプを次のように設定します。

req.responseType = 'arraybuffer';

（これを参照してください。応答タイプを変更する場合も、非同期要求を行う必要があります）。

4

1 に答える 1

0

First you need to create an img element (which is hidden) Then you do exactly what you have done except that you listen to your onload event on your img element. When this event is launched you are able to get the width and height of your pictures so you can set your canvas to the same size.

The you can draw your image as you did in last line.

于 2012-04-03T10:37:46.860 に答える