如何将API返回的image/jpeg通过<img>或<canvas>显示？含代码疑问

解决API图片显示问题：与两种实现方式 #

没问题，这事儿分两种场景来处理，对应你的API两种返回格式，我给你把代码改好并解释清楚：

场景1：API返回纯image/jpeg二进制内容 #

这种情况下，你需要让XMLHttpRequest正确处理二进制响应，然后通过Blob对象生成可访问的图片URL，再绑定到<img>或<canvas>上。

修改后的完整代码：

function getPhoto() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  var base_url = encodeURI(document.getElementById('base_url').value);
  var xhttp = new XMLHttpRequest();
  
  // 异步请求完成后的处理逻辑
  xhttp.onload = function() {
    if (this.status === 200) {
      // 将二进制响应转换为Blob对象（指定类型为image/jpeg）
      var imageBlob = new Blob([this.response], { type: 'image/jpeg' });
      // 创建临时的Blob URL，用于图片加载
      var imageUrl = URL.createObjectURL(imageBlob);
      
      // 方式1：用<img>标签显示图片
      var imgElement = document.createElement('img');
      imgElement.src = imageUrl;
      imgElement.alt = "用户照片";
      // 把图片添加到页面的容器中（需要提前在HTML里定义id为photoContainer的元素）
      document.getElementById('photoContainer').appendChild(imgElement);
      
      // 方式2：用<canvas>元素显示图片（可选）
      var canvasElement = document.getElementById('photoCanvas');
      var canvasCtx = canvasElement.getContext('2d');
      var canvasImg = new Image();
      
      canvasImg.onload = function() {
        // 匹配canvas尺寸和图片尺寸
        canvasElement.width = canvasImg.width;
        canvasElement.height = canvasImg.height;
        // 绘制图片到canvas
        canvasCtx.drawImage(canvasImg, 0, 0);
      };
      canvasImg.src = imageUrl;
    }
  };
  
  xhttp.open("POST", "http://api.reteps.tk/getPowerschoolPhoto", true);
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  // 关键设置：告诉XHR我们要接收二进制Blob类型的响应
  xhttp.responseType = 'blob';
  xhttp.send(`base_url=https://${base_url}&username=${username}&password=${password}`);
}

关键注意点： #

• 必须设置xhttp.responseType = 'blob'，否则二进制数据会被解析为字符串，导致图片无法显示
• 异步请求必须在onload事件中处理响应，不能直接在send()之后访问响应（因为请求还没完成）
• 用完Blob URL后可以调用URL.revokeObjectURL(imageUrl)释放资源，避免内存泄漏

场景2：API返回图片Base64字符串 #

如果你的API改成返回Base64格式的图片字符串，处理会更简单——直接把字符串赋值给<img>的src属性即可（注意字符串是否包含data:image/jpeg;base64,前缀）。

修改后的代码：

function getPhoto() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  var base_url = encodeURI(document.getElementById('base_url').value);
  var xhttp = new XMLHttpRequest();
  
  xhttp.onload = function() {
    if (this.status === 200) {
      var imageBase64 = this.responseText;
      
      // 方式1：用<img>标签显示
      var imgElement = document.createElement('img');
      // 如果API返回的是不带前缀的纯Base64内容，需要手动添加前缀
      // imgElement.src = "data:image/jpeg;base64," + imageBase64;
      // 如果API已经返回完整的Data URI（带前缀），直接赋值即可
      imgElement.src = imageBase64;
      imgElement.alt = "用户照片";
      document.getElementById('photoContainer').appendChild(imgElement);
      
      // 方式2：用<canvas>显示（可选）
      var canvasElement = document.getElementById('photoCanvas');
      var canvasCtx = canvasElement.getContext('2d');
      var canvasImg = new Image();
      
      canvasImg.onload = function() {
        canvasElement.width = canvasImg.width;
        canvasElement.height = canvasImg.height;
        canvasCtx.drawImage(canvasImg, 0, 0);
      };
      canvasImg.src = imageBase64;
    }
  };
  
  xhttp.open("POST", "http://api.reteps.tk/getPowerschoolPhoto", true);
  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  xhttp.send(`base_url=https://${base_url}&username=${username}&password=${password}`);
}

补充：页面容器准备 #

你需要在HTML中提前定义用于放置图片的容器：

<!-- 用于显示<img>的容器 -->
<div id="photoContainer"></div>
<!-- 可选的canvas元素 -->
<canvas id="photoCanvas"></canvas>

内容的提问来源于stack exchange，提问作者user7903682