Sử dụng phương thức ajax của jQuery để truy xuất hình ảnh dưới dạng một đốm màu

Gần đây tôi đã hỏi một câu hỏi khác (có liên quan), dẫn đến câu hỏi tiếp theo này: Gửi dữ liệu thay vì tệp cho biểu mẫu đầu vào

Đọc qua tài liệu jQuery.ajax () ( http://api.jquery.com/jQuery.ajax/ ), có vẻ như danh sách dataTypes được chấp nhận không bao gồm hình ảnh.

Tôi đang cố gắng truy xuất hình ảnh bằng jQuery.get (hoặc jQuery.ajax nếu phải), lưu trữ hình ảnh này trong Blob và tải nó lên máy chủ khác theo yêu cầu ĐĂNG. Hiện tại, có vẻ như do kiểu dữ liệu không khớp, hình ảnh của tôi cuối cùng bị hỏng (kích thước tính bằng byte không khớp, v.v.).

Mã để thực hiện điều này như sau (nó nằm trong coffeescript nhưng không khó để phân tích cú pháp):

handler = (data,status) ->
  fd = new FormData
  fd.append("file", new Blob([data], { "type" : "image/png" }))
  jQuery.ajax {
    url: target_url,
    data: fd,
    processData: false,
    contentType: "multipart/form-data",
    type: "POST",
    complete: (xhr,status) ->
      console.log xhr.status
      console.log xhr.statusCode
      console.log xhr.responseText

  }
jQuery.get(image_source_url, null, handler)

Làm cách nào để truy xuất hình ảnh này dưới dạng một đốm màu?

Bạn không thể làm điều này với jQuery ajax, nhưng với XMLHttpRequest nguyên bản.

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();      

BIÊN TẬP

Vì vậy, xem lại chủ đề này, có vẻ như thực sự có thể làm điều này với 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(){
            
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<img id="img" width=100%>

hoặc là

sử dụng xhrFields để đặt responseType

    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,
            xhrFields:{
                responseType: 'blob'
            },
            success: function(data){
                var img = document.getElementById('img');
                var url = window.URL || window.webkitURL;
                img.src = url.createObjectURL(data);
            },
            error:function(){
                
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <img id="img" width=100%>

Nếu bạn cần xử lý thông báo lỗi bằng jQuery.AJAX, bạn sẽ cần phải sửa đổi xhrhàm để hàmresponseType không bị sửa đổi khi xảy ra lỗi.

Vì vậy, bạn sẽ phải sửa đổi responseTypethành " blob " chỉ khi đó là một cuộc gọi thành công:

$.ajax({
    ...
    xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 2) {
                if (xhr.status == 200) {
                    xhr.responseType = "blob";
                } else {
                    xhr.responseType = "text";
                }
            }
        };
        return xhr;
    },
    ...
    error: function(xhr, textStatus, errorThrown) {
        // Here you are able now to access to the property "responseText"
        // as you have the type set to "text" instead of "blob".
        console.error(xhr.responseText);
    },
    success: function(data) {
        console.log(data); // Here is "blob" type
    }
});

Ghi chú

Nếu bạn gỡ lỗi và đặt một điểm ngắt tại điểm ngay sau khi đặt xhr.responseTypethành " blob ", bạn có thể lưu ý rằng nếu bạn cố gắng lấy giá trị cho responseTextbạn sẽ nhận được thông báo sau:

Giá trị chỉ có thể truy cập được nếu 'responseType' của đối tượng là '' hoặc 'văn bản' (là 'blob').

Xin gửi lời cảm ơn sâu sắc đến @Musa và đây là một hàm gọn gàng giúp chuyển đổi dữ liệu thành chuỗi base64. Điều này có thể hữu ích cho bạn khi xử lý tệp nhị phân (pdf, png, jpeg, docx, ...) trong WebView nhận được tệp nhị phân nhưng bạn cần chuyển dữ liệu của tệp một cách an toàn vào ứng dụng của mình.

// runs a get/post on url with post variables, where:
// url ... your url
// post ... {'key1':'value1', 'key2':'value2', ...}
//          set to null if you need a GET instead of POST req
// done ... function(t) called when request returns
function getFile(url, post, done)
{
   var postEnc, method;
   if (post == null)
   {
      postEnc = '';
      method = 'GET';
   }
   else
   {
      method = 'POST';
      postEnc = new FormData();
      for(var i in post)
         postEnc.append(i, post[i]);
   }
   var xhr = new XMLHttpRequest();
   xhr.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200)
      {
         var res = this.response;
         var reader = new window.FileReader();
         reader.readAsDataURL(res); 
         reader.onloadend = function() { done(reader.result.split('base64,')[1]); }
      }
   }
   xhr.open(method, url);
   xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xhr.send('fname=Henry&lname=Ford');
   xhr.responseType = 'blob';
   xhr.send(postEnc);
}