"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > jQuery 및 JavaScript를 사용하여 이미지를 블로브로 검색하는 방법은 무엇입니까?

jQuery 및 JavaScript를 사용하여 이미지를 블로브로 검색하는 방법은 무엇입니까?

2025-03-23에 게시되었습니다
검색:489

How to Retrieve Images as Blobs Using jQuery and JavaScript?

제한된 JQuery 데이터 유형

jquery.ajax는 이미지를 설명하지 않습니다. 따라서 jQuery 만 사용하여 블로브로 이미지에 액세스하는 것은 불가능합니다.

기본 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를 사용할 수 있습니다. 예는 다음과 같습니다.

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 URL 속성을 사용하여 HTML 요소에 이미지를 표시합니다. 사용 가능 :

jQuery.ajax ({{ URL : 'https : //images.unsplash.com/photo-1465101108990-e5eac17cf76d? ixlib = rb-0.3.5 & q = 85 & fm = j pg & crop = altropy & cs = srgb & ixid = eyjhchbfawqioje0ntg5fq == & s = 471AE675A6140DB97FEA32B55781479E ', 캐시 : false, XHR : function () {// XHR 객체에 액세스하는 유일한 방법 인 것 같습니다. var xhr = 새로운 xmlhttprequest (); xhr.responsetype = 'blob' XHR 리턴; }, 성공 : 기능 (데이터) { var img = document.getElementById ( 'IMG'); var url = window.url || Window.WebKitUrl; img.src = url.createobjecturl (data); }, 오류 : function () { } });

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==&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(){
            
        }
    });
최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3