使用Javascript / JQuery從REST Web服務獲取圖像

Question

我正在嘗試通過從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顯示Status 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異常5”。 即使我通過將base64數據放入src來抑制此異常來對其進行強制編碼，它在Firebug中也會顯示損壞的數據。 我的感覺是，當我要覆蓋MIME類型時，二進制數據的編碼正以某種方式被篡改，因此在base64編碼過程中，它會帶來一些問題。

誰能說出我要去哪里的錯誤，或者可以演示如何從REST API中獲取圖像（jpeg / png / gif /有時tif）文件？

Answer 1

也許您不需要對數據進行編碼。 嘗試將確切的base64字符串轉儲到圖像標簽中，例如

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