jQuery의 ajax 메소드를 사용하여 이미지를 Blob으로 검색하려면 어떻게 해야 합니까?

jQuery의 ajax 메서드를 사용하여 이미지를 Blob으로 검색

배경:
이전 질문에서 논의한 것처럼 다음이 필요합니다. jQuery를 사용하여 이미지를 검색하고 나중에 POST 요청에 사용할 수 있도록 Blob으로 저장합니다. 그러나 jQuery의 데이터 유형은 이미지를 명시적으로 언급하지 않습니다.

문제:
CoffeeScript(및 이에 상응하는 JavaScript)의 현재 코드는 jQuery.get() 및 FormData 개체에 Blob으로 저장합니다. 그러나 이 접근 방식은 데이터 유형의 불일치로 인해 이미지가 손상되는 결과를 낳습니다.

질문:
jQuery의 ajax 방법을 사용하여 이미지를 Blob으로 검색할 수 있는 방법이 있습니까?

답변:

접근 방법 1: 기본 XMLHttpRequest 사용

다음을 사용하여 이미지를 Blob으로 검색하는 것은 불가능합니다. jQuery의 ajax 메소드만 사용 가능합니다. 그러나 기본 XMLHttpRequest를 활용하면 솔루션이 제공됩니다. 다음은 JavaScript 코드 조각입니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    if (this.readyState == 4 && this.status == 200){
        //this.response is what you're looking for
        handler(this.response);
        console.log(this.response, typeof this.response);
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(this.response);
    }
}
xhr.open('GET', 'http://jsfiddle.net/img/logo.png');
xhr.responseType = 'blob';
xhr.send(); 

이 코드에서는 XMLHttpRequest 객체가 생성되고 해당 responseType이 'blob'으로 설정됩니다. onreadystatechange 이벤트는 응답을 처리하고 이미지에 대한 객체 URL을 생성하는 데 사용됩니다.

접근 방법 2: jQuery 3 사용

그러나 다음과 같이 언급할 가치가 있습니다. jQuery 버전 3에서는 이제 이미지를 Blob으로 검색하는 것이 가능합니다. 다음은 jQuery 3을 사용하여 수정된 JavaScript 코드 조각입니다.

$.ajax({
    url:'https://images.unsplash.com/photo-1465101108990-e5eac17cf76d?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ%3D%3D&s=471ae675a6140db97fea32b55781479e',
    cache: false,
    xhr:function(){// Seems like the only way to get access to the xhr object
        var xhr = new XMLHttpRequest();
        xhr.responseType = 'blob'
        return xhr;
    },
    success: function(data){
        var img = document.getElementById('img');
        var url = window.URL || window.webkitURL;
        img.src = url.createObjectURL(data);
    },
    error:function(){
        
    }
});

이 코드 조각에서는 jQuery의 xhr() 함수를 사용하여 XMLHttpRequest 개체에 대한 액세스 권한을 얻고 해당 responseType을 'blob'로 설정합니다. 이를 통해 이미지를 Blob으로 검색하여 원하는 대로 사용할 수 있습니다.

위 내용은 jQuery의 ajax 메소드를 사용하여 이미지를 Blob으로 검색하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!