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事件。启动此活动后，您可以获得图片的宽度和高度，以便将画布设置为相同的尺寸。

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

从XMLHttpRequest获取图像并显示它

1 个答案: