jQuery.jax()를 사용하여 이미지를 가져와 base64로 디코딩합니다.

jQuery.jax()를 사용하여 이미지를 가져와 base64로 디코딩합니다.

내가 하고 싶은 작업:

기본 인증 보안 서버에서 jQuery.ajax()를 사용하여 HTTP-GET an 이미지(jpeg)를 가져옵니다.이미지의 일부 데이터를 얻는 것 같습니다. 이진이어야 합니다. 저는 그것을 base64로 변환하고 싶습니다. 왜냐하면 저는 이것을 제 html에 이미지로 삽입할 수 있기 때문입니다.

     $("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data));

Ajax 호출은 다음과 같습니다.

            $.ajax({
                url: "someurltoajpeg",
                type: "GET",
                headers: {
                    "Authorization" : "Basic " +  btoa("user:pw")
                },
                xhrFields: {
                    withCredentials: true
                }
            }).done(function( data, textStatus, jqXHR ) {
                $("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data));
            }).fail(function( jqXHR, textStatus, errorThrown ) {
                alert("fail: " + errorThrown);
            });

base64는 다음과 같습니다.

        function base64encode(binary) {
            return btoa(unescape(encodeURIComponent(binary)));
        }

나는 여기서 이 기능을 얻었습니다: Javascript를 사용하여 이진 파일 콘텐츠 검색, base64 인코딩 및 Python을 사용하여 역 디코딩

거기서 그는 그것이 그에게 효과가 있다고 말합니다. 하지만 제 경우에는 제 이미지의 src 속성이 변경되고, 매우 긴 데이터가 삽입되지만, 그 이미지에 대한 아주 작은 기호만 나타나야 합니다.저는 그 "이미지"를 저장할 수 있는데, 그것은 거기에도 없고, 제가 그것을 열었을 때, 제 이미지 뷰어는 그것이 JPEG 파일이 아니라고 말합니다.특정 이미지 또는 동일한 오리진 정책에 의해 발생한 오류가 아닙니다.이것에 대한 해결책을 가진 사람이 있습니까?감사해요.

먼저, Javascript를 사용한 이진 파일 콘텐츠 검색에 따르면 base64는 이를 인코딩하고 Python을 사용하여 역디코드합니다. Ajax 호출에 올바른 mimtype을 추가합니다.

 $.ajax({
            url: "someurltoajpeg",
            type: "GET",
            headers: {
                "Authorization" : "Basic " +  btoa("user:pw")
            },
            xhrFields: {
                withCredentials: true
            },
            mimeType: "text/plain; charset=x-user-defined"
        }).done(function( data, textStatus, jqXHR ) {
            $("#image").attr('src', 'data:image/jpeg;base64,' + base64encode(data));
        }).fail(function( jqXHR, textStatus, errorThrown ) {
            alert("fail: " + errorThrown);
        });

그런 다음 btoa 대신 설명된 base64Encode 함수를 사용합니다.

function base64Encode(str) {
        var CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
        var out = "", i = 0, len = str.length, c1, c2, c3;
        while (i < len) {
            c1 = str.charCodeAt(i++) & 0xff;
            if (i == len) {
                out += CHARS.charAt(c1 >> 2);
                out += CHARS.charAt((c1 & 0x3) << 4);
                out += "==";
                break;
            }
            c2 = str.charCodeAt(i++);
            if (i == len) {
                out += CHARS.charAt(c1 >> 2);
                out += CHARS.charAt(((c1 & 0x3)<< 4) | ((c2 & 0xF0) >> 4));
                out += CHARS.charAt((c2 & 0xF) << 2);
                out += "=";
                break;
            }
            c3 = str.charCodeAt(i++);
            out += CHARS.charAt(c1 >> 2);
            out += CHARS.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
            out += CHARS.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
            out += CHARS.charAt(c3 & 0x3F);
        }
        return out;
    }

안녕.

IE 9를 지원할 필요가 없다면 API를 사용하여 BLOB를 데이터 URL로 변환할 수 있습니다.다음을 제공합니다.readAsDataURL()Blob을 첫 번째 인수로 수락하는 메서드입니다.블롭이 읽히자마자, 그것은 발사합니다.load이벤트 및 데이터 URL 제공result소유물.

이것은 base64 문자열로 사용자 지정 인코딩을 필요로 하지 않기 때문에 훨씬 안정적이고 코드가 적게 필요합니다. 이는 의 제한을 고려한 복잡한 작업입니다.

사용할 수 있습니다.jQuery.ajax()또는 Blob으로 파일을 로드합니다.

jQuery.ajax(url, {
  dataType: 'binary',
  xhr() {
    let myXhr = jQuery.ajaxSettings.xhr();
    myXhr.responseType = 'blob';
    return myXhr;
  }
}).then((response) => {
  // response is a Blob
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    reader.addEventListener('load', () => {
      // reader.result holds a data URL representation of response
      resolve(reader.result);
    }, false);
    reader.addEventListener('error', () => {
      reject(reader.error);
    }, false);
    reader.readAsDataURL(response);
  });
});

이 예제 코드는 Promise를 사용하고 있지만 콜백을 사용하는 경우에도 유사하게 작동합니다.

언급URL : https://stackoverflow.com/questions/19124701/get-image-using-jquery-ajax-and-decode-it-to-base64