Blob từ DataURL?

Sử dụng FileReader's, readAsDataURL()tôi có thể chuyển đổi dữ liệu tùy ý thành URL dữ liệu. Có cách nào để chuyển đổi lại một URL dữ liệu thành một Blobphiên bản bằng cách sử dụng apis trình duyệt nội trang không?

Người dùng Matt đã đề xuất đoạn mã sau đây một năm trước ( Làm thế nào để chuyển đổi dataURL sang đối tượng tệp trong javascript? ), Mã này có thể giúp bạn

CHỈNH SỬA: Như một số người bình luận đã báo cáo, BlobBuilder đã không còn được dùng cách đây một thời gian. Đây là mã được cập nhật:

function dataURItoBlob(dataURI) {
  // convert base64 to raw binary data held in a string
  // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
  var byteString = atob(dataURI.split(',')[1]);

  // separate out the mime component
  var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]

  // write the bytes of the string to an ArrayBuffer
  var ab = new ArrayBuffer(byteString.length);

  // create a view into the buffer
  var ia = new Uint8Array(ab);

  // set the bytes of the buffer to the correct values
  for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
  }

  // write the ArrayBuffer to a blob, and you're done
  var blob = new Blob([ab], {type: mimeString});
  return blob;

}

Giống như phương thức @Adria nhưng với Fetch api và nhỏ hơn [ caniuse? ]
Không phải nghĩ về mimetype vì kiểu phản hồi blob chỉ hoạt động hiệu quả

Cảnh báo: Có thể vi phạm Chính sách bảo mật nội dung (CSP)
... nếu bạn sử dụng nội dung đó

var url = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="

fetch(url)
.then(res => res.blob())
.then(blob => console.log(blob))

Đừng nghĩ rằng bạn có thể làm điều đó nhỏ hơn bất kỳ điều này mà không cần sử dụng lib's

dataURItoBlob : function(dataURI, dataTYPE) {
        var binary = atob(dataURI.split(',')[1]), array = [];
        for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
        return new Blob([new Uint8Array(array)], {type: dataTYPE});
    }

dữ liệu đầu vàoURI là URL dữ liệu và dataTYPE là loại tệp và sau đó xuất đối tượng blob

Phương pháp dựa trên XHR.

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'arraybuffer'; // Can't use blob directly because of https://crbug.com/412752

    req.onload = function fileLoaded(e)
    {
        // If you require the blob to have correct mime type
        var mime = this.getResponseHeader('content-type');

        callback( new Blob([this.response], {type:mime}) );
    };

    req.send();
}

dataURLtoBlob( 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==', function( blob )
{
    console.log( blob );
});

Trong các trình duyệt hiện đại, người ta có thể sử dụng một lớp lót do Christian d'Heureuse đề xuất trong một nhận xét:

const blob = await (await fetch(dataURI)).blob(); 

thử:

function dataURItoBlob(dataURI) {
    if(typeof dataURI !== 'string'){
        throw new Error('Invalid argument: dataURI must be a string');
    }
    dataURI = dataURI.split(',');
    var type = dataURI[0].split(':')[1].split(';')[0],
        byteString = atob(dataURI[1]),
        byteStringLength = byteString.length,
        arrayBuffer = new ArrayBuffer(byteStringLength),
        intArray = new Uint8Array(arrayBuffer);
    for (var i = 0; i < byteStringLength; i++) {
        intArray[i] = byteString.charCodeAt(i);
    }
    return new Blob([intArray], {
        type: type
    });
}

Tạo một đốm màu bằng cách sử dụng API XHR :

function dataURLtoBlob( dataUrl, callback )
{
    var req = new XMLHttpRequest;

    req.open( 'GET', dataUrl );
    req.responseType = 'blob';

    req.onload = function fileLoaded(e)
    {
        callback(this.response);
    };

    req.send();
}

var dataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='

dataURLtoBlob(dataURI , function( blob )
{
    console.log( blob );
});

Sử dụng mã của tôi để chuyển đổi dataURI thành blob. Nó đơn giản và sạch sẽ hơn những cái khác.

function dataURItoBlob(dataURI) {
    var arr = dataURI.split(','), mime = arr[0].match(/:(.*?);/)[1];
    return new Blob([atob(arr[1])], {type:mime});
}

Vì không có câu trả lời nào trong số này hỗ trợ dataURL của base64 và không phải base64, đây là một câu trả lời dựa trên câu trả lời đã xóa của vuamitom:

// from /programming/37135417/download-canvas-as-png-in-fabric-js-giving-network-error/
var dataURLtoBlob = exports.dataURLtoBlob = function(dataurl) {
    var parts = dataurl.split(','), mime = parts[0].match(/:(.*?);/)[1]
    if(parts[0].indexOf('base64') !== -1) {
        var bstr = atob(parts[1]), n = bstr.length, u8arr = new Uint8Array(n)
        while(n--){
            u8arr[n] = bstr.charCodeAt(n)
        }

        return new Blob([u8arr], {type:mime})
    } else {
        var raw = decodeURIComponent(parts[1])
        return new Blob([raw], {type: mime})
    }
}

Lưu ý: Tôi không chắc liệu có các loại mime dataURL khác có thể phải được xử lý theo cách khác hay không. Nhưng hãy cho tôi biết nếu bạn phát hiện ra! Có thể dữ liệuURL có thể có bất kỳ định dạng nào họ muốn và trong trường hợp đó, bạn có thể tìm đúng mã cho trường hợp sử dụng cụ thể của mình.

sử dụng

FileReader.readAsArrayBuffer(Blob|File)

hơn là

FileReader.readAsDataURL(Blob|File)