0

我正在尝试通过从 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 = "data:image/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/有时是 tif）文件？

4

1 回答 1

1

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

<img src="data:image/png;base64,@@BASE64STRING@@"/>
于 2012-08-08T05:29:46.477 回答