es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo dibujar una imagen/bmp desde una API HTTP en un canvas HTML en JavaScript?

27 May, 2023 Programación

Trabajando completamente en el lado del cliente, tengo la intención de usar un servicio HTTP que responda a una solicitud POST enviando un archivo BMP con el tipo de respuesta establecido en image/bmp.

¿Cómo puedo dibujar esta imagen en un objeto de lienzo HTML usando JavaScript?

Aquí hay un fragmento de código que resulta en una imagen absurda (debido a un procesamiento incorrecto de datos binarios en bruto?):

 function refresh() {
     var request = new XMLHttpRequest();
     request.open('POST', 'imgview');
     request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
     request.setRequestHeader('Response-Type', 'image/bmp');
     request.onload = function(event) {
         if (request.status >= 200 && request.status < 300) {
             var blob = new Blob([request.response], {type: 'image/bmp'});
             var imageURL = window.URL.createObjectURL(blob); 
             var image = new Image;
             image.crossOrigin = "Anonymous";
             image.onload = function() {
                 console.log(image.width)
                 document.body.appendChild(image);
                 var canvas = document.getElementById("canvas");
                 var context = canvas.getContext('2d');
                 context.drawImage(image, 0, 0);
             }
             image.src = imageURL;
         } else {
             // [...]
         }
     };

// [...]
request.send(requestText);
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para dibujar una imagen BMP en un objeto canvas de HTML utilizando JavaScript, puede modificar el código anterior de la siguiente manera:

    function refresh() {
  var request = new XMLHttpRequest();
  request.open("POST", "imgview");
  request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  request.setRequestHeader("Response-Type", "arraybuffer");
  request.responseType = "arraybuffer"; // Use responseType instead of setRequestHeader
  request.onload = function (event) {
    if (request.status >= 200 && request.status < 300) {
      var blob = new Blob([request.response], { type: "image/bmp" });
      var imageURL = window.URL.createObjectURL(blob);
      var image = new Image();
      image.crossOrigin = "Anonymous";
      image.onload = function () {
        console.log(image.width);
        document.body.appendChild(image);
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);
      };
      image.src = imageURL;
    } else {
      // [...]
    }
  };

  // [...]
  request.send(requestText);
}

    Los cambios realizados son:

    • Establecer responseType en “arraybuffer” para recibir los datos de la imagen como un búfer binario.
    • Eliminar setRequestHeader para Response-Type ya que responseType ya está establecido.
    • Analizar los datos binarios recibidos como un objeto Blob.
    • Utilizar createObjectURL() para crear una URL para el objeto blob, la cual se puede utilizar como el src para un objeto imagen.
    • Una vez que la imagen se carga, utilizar drawImage() para dibujar la imagen en el canvas.

Comments are closed.