Получение изображения из XMLHttpRequest и его отображение

Question

Я получил этот веб-сервис, который дает мне (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 (который скрыт) Затем вы делаете именно то, что сделали, за исключением того, что слушаете событие onload в элементе img. Когда это событие запущено, вы можете получить ширину и высоту ваших изображений, чтобы вы могли установить свой холст на тот же размер.

Вы можете нарисовать свое изображение, как вы делали в последней строке.