Erhalte ein Bild von einem XMLHttpRequest und zeige es an

Question

Ich habe diesen Webservice, der mir ein (JPEG) Bild gibt. Was ich will, ist dieses Bild nehmen, wandeln es in ein Data URI und zeigt sie auf einem HTML5-Canvas, wie folgt aus:

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

Leider ist dieses Stück Code funktioniert nicht; das Bild ist überhaupt nicht auf der Leinwand gemalt (plus scheint, dass Breite und Höhe = 0, könnte es nicht korrekt dekodiert werden? Ich bekomme keine Ausnahmen). img.src sieht aus wie data:image/jpeg;base64,77+977+977+977+9ABBKRklG....

Entschlossen: stellt sich heraus, ich mit den Mime-Typ außer Kraft gesetzt haben sollte:

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

und stellen Sie den Antworttyp mit:

req.responseType = 'arraybuffer'; 

(siehe this. Sie sollten eine asynchrone Anfrage machen, wenn Sie auch den Antworttyp ändern.

Answer 1

Zuerst müssen Sie ein img-Element erstellen (das ist ausgeblendet) Dann machen Sie genau das, was Sie getan haben, außer dass Sie auf Ihr onload-Ereignis auf Ihrem Element img hören. Wenn dieses Ereignis gestartet wird, können Sie die Breite und Höhe Ihrer Bilder ermitteln, sodass Sie die Leinwand auf die gleiche Größe einstellen können.

Sie können Ihr Bild wie in der letzten Zeile zeichnen.