jQuery.ajax wcf 서비스에서 이미지 가져 오기 및 디스플레이

Question

jQuery.ajax를 사용하여 wcf 서비스에서 반환 된 이미지를 다운로드하고 표시하려고합니다. 내가받은 데이터로 작업 할 수 없으며 그 이유를 모르겠습니다. 나는 많은 것을 시도했지만 아무것도 작동하지 않는 것 같습니다. 여기

서비스 : 여기

public Stream DownloadFile(string fileName, string pseudoFileName) 
    { 
     string filePath = Path.Combine(PictureFolderPath, fileName); 
     if (System.IO.File.Exists(filePath)) 
     { 
      FileStream resultStream = System.IO.File.OpenRead(filePath); 
      WebOperationContext.Current.OutgoingResponse.ContentType = "application/x-www-form-urlencoded"; 
      return resultStream; 
     } 
     else 
     { 
      throw new WebFaultException(HttpStatusCode.NotFound); 
     } 
    } 

내 아약스 전화 :

  $.ajax({ 
       type: "GET", 
       url: apiURL + serviceDownloadFile.replace('{filename}', filename), 
       headers: headers, 
       contentType: "application/x-www-form-urlencoded", 
       processData : false, 
       success: function(response) { 
        var html = '<img src="data:image/jpeg;base64,' + base64encode(response) +'">'; 
        $("#activitiesContainer").html(html); 
       }, 
       error: function (msg) { 
        console.log("error"); 
        console.log(msg); 
       } 
      }); 

<img> 태그에 URL을 퍼팅이 제대로 이미지를 표시 할 수 있지만 않는 서비스가 인증 헤더를 필요로하기 때문에, 페이지는 매번 자격 증명을 요청합니다.

그럼 내 질문에이 응답 데이터를 어떻게 표시해야합니까? using btoa(); 응답에 오류를 표시합니다

문자열이 잘못된 문자를

감사가 포함되어 있습니다.

Answer 1

무사 (Musa)가 제안한 것처럼 XMLHttpRequest를 사용하여 직접 트릭을 수행했습니다.

  var xhr = new XMLHttpRequest(); 
      xhr.open('GET', apiURL + serviceDownloadFile.replace('{filename}', filename).replace('{pseudofilename}', fileNameExt), true); 
      xhr.responseType = 'blob'; 
      xhr.setRequestHeader("authorization","xxxxx"); 

      xhr.onload = function(e) { 
       if (this.status == 200) { 
       var blob = this.response; 

       var img = document.createElement('img'); 
       img.onload = function(e) { 
        window.URL.revokeObjectURL(img.src); // Clean up after yourself. 
       }; 
       img.src = window.URL.createObjectURL(blob); 
       document.body.appendChild(img); 
       } 
      }; 

      xhr.send();