在 Javascript/JQuery 中从 REST Web 服务获取图像

Posted 2023-05-09

【中文标题】在 Javascript/JQuery 中从 REST Web 服务获取图像

【英文标题】：Fetching image from REST webservices in Javascript/JQuery

【发布时间】：2012-08-05 04:23:36

【问题描述】：

我正在尝试通过从 REST Web 服务获取二进制数据来动态填充我的图像标签 src。我的链接类似于 myhost:port/docId/imageId/file ，它返回“application/octet-stream”的内容类型，并且 datatType 是二进制的。我的方法是获取这个二进制数据，base64 对其进行编码（使用 jquery.base64.js），然后将 base64 编码的数据放入 src。部分代码如下。

            $.ajax(
          url: " myhost:port/docId/imageId/file ",
          datatype: "binary",
          beforeSend: function (xhr) 
              xhr.overrideMimeType("text/plain; charset=x-user-defined");
          ,
          success: function(image)
              var imgBase64 = $.base64.encode(image);
              return  imgBase64  ;
          ,
          error: function(xhr, text_status)
              console.log("An error again " + text_status);
          
    );

我采用的另一种简单的 AJAX 方法是：

  req.open('GET', " myhost:port/docId/imageId/file" , false);
  req.overrideMimeType('text\/plain; charset=x-user-defined');
  if (req.status != 200)
          console.log("Status code not 200");
          return '';
      
  return req.responseText;

我将覆盖 MIME 类型，因为如果我不这样做，虽然 GET 显示状态 200 OK，但获取会引发一些错误。 现在我是 base64 编码 "req.responseText" [var imgBase64 = $.base64.encode( req.responseText );] 并将它放在我图像的 src 中。

这就是我将base64数据放入img的方式： var imageSource = "数据:图像/png;base64," + imgBase64 ; $('#imageId').attr('src', imageSource); 然而，在这两种情况下进行编码时 jquery base64 向我抛出异常“INVALID_CHARACTER_ERR: DOM Exception 5”。即使我在将 base64 数据放入 src 时通过抑制此异常对其进行强制编码，它也会在 Firebug 中显示损坏的数据。我的感觉是，当我覆盖 MIME 类型时，二进制数据的编码会以某种方式被篡改，因此在 base64 编码期间会出现一些问题。

谁能建议我哪里出错了，或者可以演示如何从 REST api 获取图像（jpeg/png/gif/sometimes tif）文件？

【问题讨论】：

是否需要数据 uri，您就不能这样做吗$('#imageId').attr('src', 'myhost:port/docId/imageId/file');

我需要将一些安全标头发送到我的服务器。加上我的服务器返回二进制数据。图片src可以直接显示二进制数据吗？

我尝试了base64插件，我无法让它工作，你不能base64编码服务器上的数据然后发送它。

【参考方案1】：

也许您不需要对数据进行编码。尝试将确切的 base64 字符串转储到像

这样的图像标签中

<img src="data:image/png;base64,@@BASE64STRING@@"/>