从XMLHttpRequest获取图像并显示它

Question

我得到了这个Web服务，它为我提供了一个（jpeg）图像。我要的是借此图像，将其转换成数据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'; 

（见this。如果您更改响应类型，您也应该发出异步请求）。

Answer 1

首先你需要创建一个img元素（它是隐藏的） 然后你完成你所做的，除了你在你的img元素上听onload事件。 启动此事件时，您可以获取图片的宽度和高度，以便您可以将画布设置为相同大小。

您可以像在最后一行那样绘制图像。