$http에서 이미지를 반환하는 방법.AngularJS에 들어가다

$http에서 이미지를 반환하는 방법.AngularJS에 들어가다

컨트롤러에서 약속을 반환하는 서비스를 호출합니다.

var onComplete = function(data) {
               $scope.myImage = data;           
            };

서비스 중에 url을 이미지 자체에 직접 전달하여 이미지를 받기 위해 전화를 걸었습니다.

   return $http.get("http://someurl.com/someimagepath")
         .then(function(response){          
          return response.data;
         });

모든 호출이 성공하고 있으며 response.data가 내부 이미지에 포함되어 있는 것으로 보입니다.

����JFIF��;CREATOR: gd-jpeg v1.0 (using IJG JPEG v80), quality = 90
��C




��C      

����"�� 
���}!1AQa"q2���#B��R��$

표시하는 데 어려움을 겪고 있기 때문에 실제로 가능한지는 잘 모르겠지만요.(inside index.html) 해봤습니다.

 <img ng-src="{{myImage}}"> 
  and
<img ng-src="{{myImage}}.jpeg"> 
  and   
 <img ng-src="data:image/JPEG;base64,{{myImage}}">

아이디어? $http에서 실제 이미지를 돌려줄 수 있나요?응답을 가져와 이미지로 다시 변환(jpeg 등)

감사합니다!

어떤 방법도 완전하지 않은 것 같습니다. 이것은 완전한 해결책입니다.

  $http({
    method: 'GET',
    url: imageUrl,
    responseType: 'arraybuffer'
  }).then(function(response) {
    console.log(response);
    var str = _arrayBufferToBase64(response.data);
    console.log(str);
    // str is base64 encoded.
  }, function(response) {
    console.error('error in getting static img.');
  });


  function _arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array(buffer);
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    return window.btoa(binary);
  }

그러면 직접 사용할 수 있습니다.

<img data-ng-src="data:image/png;base64,{{img}}">

ArrayBuffer를 base64로 변환하는 함수는 ArrayBuffer에서 base64로 인코딩된 문자열로 직접 가져옵니다.

필요한 사람이 있을 때를 대비해서요.

저 같은 경우는 angular's를 통해서 요청서를 보내야 했습니다.$http서비스, 다양한 변압기와 우리가 그것으로 하는 다른 멋진 것들 때문에.

그래서 앞서 언급한 Mozilla의 가이드를 바탕으로 다음과 같은 해결책을 생각해 냈습니다.

let getImageDataURL = (url, imageType = 'image/jpeg') => {
  return $http.get(url, {responseType: 'arraybuffer'}).then((res) => {
    let blob = new Blob([res.data], {type: imageType});
    return (window.URL || window.webkitURL).createObjectURL(blob);
  });
};

기본적인 아이디어는 다음과 같이 설정하는 것입니다.responseType기본 XHR 요청의 속성 및 이진 컨텐츠를 데이터 URL로 변환합니다.

돌아오는 이미지는 Base64가 아닌 이진 인코딩입니다.

이해할만한 일이지만,<img>태그는 바이너리에서 속성으로 소싱하는 것을 지원하지 않으므로 다른 솔루션을 검토해야 합니다.

함수와 함께 TypeArray를 사용하여 이진 인코딩을 클라이언트 측에서 Base64로 변환해 볼 수 있습니다.그러면 당신은 사용할 수 있을 것입니다.

<img ng-src="data:image/JPEG;base64,{{myImage}}">

Mozilla의 이 가이드에서는 에 대한 XHR 요청을 하고 이미지를 만들어 에 직접 읽어 들이는 방법을 다룹니다.좋은 출발지가 될 겁니다.

평범한 옛날 자바스크립트를 위해 쓰였지만, 줄만 배운다면 앵귤러로 번역하는 것이 좋은 연습이 될 것입니다.

https://stackoverflow.com/a/43032560/418819, 을 통해 "blob"을 responseType으로 사용하고 FileReader로 데이터 URL을 매우 깔끔하게 가져올 수 있습니다.

$http.get( url, { responseType: "blob" } ).then((result) => {
  var reader = new FileReader();
  reader.readAsDataURL( result.data );
  reader.onload = function (e) {
    return e.target.result;
  };
});

다음과 같이 참조할 수 있습니다.

<img data-ng-src="{{img}}">

언급URL : https://stackoverflow.com/questions/29780147/how-to-return-image-from-http-get-in-angularjs