在Javascript/JQuery中从REST webservice获取图像

Question

我试图通过从REST Web服务获取二进制数据来动态填充图像标记src。我的链接类似于myhost:port/docId/imageId/file，它返回的内容类型为“application/octetstream”，数据类型为二进制。我的方法是获取这个二进制数据，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，抓取是抛出一些错误。现在我是Bas64编码req.response文本[var imgBase64=$.base64.encode（req.response文本）；]并把它放在我的图像的src。

这就是我在img:var imageSource=“data:image/png；base64”imgBase64$（“#imageId”）。属性（'src'，图像源）
但是，在这两种情况下编码时，jquery base64都会引发异常“无效字符\u错误：DOM异常5”。即使我在src中放置base64数据时通过抑制此异常对其进行强制编码，它也会在Firebug中显示损坏的数据。我的感觉是，当我重写MIME类型时，二进制数据的编码在某种程度上被篡改了，因此在base64编码过程中，它带来了一些问题。

有人能告诉我哪里出错了吗，或者可能会演示如何从REST api中获取图像（jpeg/png/gif/有时是tif）文件？

Answer 1

也许你不需要对数据进行编码。尝试将确切的bas64字符串倾倒到图像标记中，如

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