0

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

4

1 回答 1

0

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

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

于 2012-04-03T10:37:46.860 回答