Image 从XMLHttpRequest获取图像并显示它

我得到了一个提供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看起来像数据：image/jpeg；base64,77+977+977+977+9abKRKLG

已解决：事实证明我应该用以下内容覆盖mime类型：

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

req.responseType = 'arraybuffer';

并将响应类型设置为：

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

req.responseType = 'arraybuffer';

---

看。如果您也更改了响应类型，则应该发出异步请求。

首先，您需要创建一个隐藏的img元素 然后，除了在img元素上侦听onload事件之外，您完全按照您所做的操作进行操作。 启动此活动后，您可以获得图片的宽度和高度，以便将画布设置为相同的大小

---

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

我认为具有数据URI源的图像立即准备就绪，但即使有onload事件，也无法工作，因为会触发错误。我已经解决了问题，请参阅我的上一次编辑。