从 XMLHttpRequest 获取图像并显示它答案

【问题标题】：Getting an image from an XMLHttpRequest and displaying it从 XMLHttpRequest 获取图像并显示它
【发布时间】：2012-04-03 20:52:49
【问题描述】：

我得到了这个网络服务，它给了我一个 (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。如果您也更改响应类型，则应该发出异步请求）。

【问题讨论】：

标签： image html canvas jpeg data-uri

【解决方案1】：

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

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

【讨论】：

我认为带有数据 URI 源的图像已立即准备就绪，但即使使用 onload 事件也无法正常工作（而是触发了 onerror）。无论如何我都解决了这个问题，请参阅我上次的编辑。