jQuery와 JavaScript를 사용하여 이미지를 Blob으로 검색하는 방법은 무엇입니까?

jQuery를 사용하여 이미지를 Blob으로 검색

이전 질문에서는 POST 요청으로 이미지 데이터를 제출하려고 했습니다. 현재 접근 방식에서는 jQuery.ajax를 사용하여 이미지를 검색하지만 데이터 유형 불일치로 인해 손상된 이미지가 발생하고 있습니다.

제한된 jQuery 데이터 유형

jQuery.ajax 여러 데이터 유형을 지원하지만 이미지를 명시적으로 포함하지는 않습니다. 따라서 jQuery만 사용하여 이미지에 blob으로 액세스하는 것은 불가능합니다.

네이티브 XMLHttpRequest 솔루션

이 문제를 해결하려면 네이티브 XMLHttpRequest를 사용할 수 있습니다. 예는 다음과 같습니다.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        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 객체를 생성하고, Blob 응답을 받도록 구성하고, Blob URL 속성을 사용하여 HTML 요소에 이미지를 표시합니다.

jQuery 3 솔루션

jQuery 3에서는 새로운 접근 방식을 사용합니다. 사용 가능:

jQuery.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(){
            
        }
    });

이 예에서 xhr 함수는 XMLHttpRequest 객체를 구성하는 데 사용되며 responseType은 명시적으로 'blob'로 설정됩니다. 이를 통해 jQuery는 이미지를 블롭으로 검색하여 이미지 요소에 표시할 수 있습니다.

위 내용은 jQuery와 JavaScript를 사용하여 이미지를 Blob으로 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!