javascript - online - vlc blob url




Wie bekomme ich eine Datei oder ein Blob von einer Objekt-URL? (4)

Ich erlaube dem Benutzer, Bilder per Drag & Drop und andere Methoden in eine Seite zu laden. Wenn ein Bild gelöscht wird, verwende ich URL.createObjectURL , um es in eine Objekt-URL zu konvertieren, um das Bild anzuzeigen. Ich widerrufe die URL nicht, da ich sie wiederverwende.

Wenn es also Zeit ist, ein FormData Objekt zu erstellen, damit ich ein Formular mit einem dieser Bilder hochladen kann, gibt es eine Möglichkeit, diese Objekt-URL in einen Blob oder eine File umzukehren, damit ich sie anhängen kann es zu einem FormData Objekt?


Leider passt @ BrianFreuds Antwort nicht zu meinen Bedürfnissen, ich hatte ein etwas anderes Bedürfnis, und ich weiß, dass das nicht die Antwort für @ BrianFreuds Frage ist, aber ich verlasse es hier, weil viele Leute mit meinem gleichen Bedürfnis hierher gekommen sind. Ich brauchte etwas wie "Wie bekomme ich eine Datei oder einen Blob von einer URL?", Und die aktuell richtige Antwort passt nicht zu meinen Bedürfnissen, da sie nicht domänenübergreifend ist.

Ich habe eine Website, die Bilder von einem Amazon S3 / Azure-Speicher verwendet, und dort speichern ich Objekte mit dem Namen uniqueneidentifiers:

Beispiel: http: //*****.blob.core.windows.net/systemimages/bf142dc9-0185-4aee-a3f4-1e5e95a09bcf

Einige dieser Bilder sollten von unserer Systemschnittstelle heruntergeladen werden. Um zu vermeiden, dass dieser Datenverkehr über meinen HTTP-Server geleitet wird, da auf diese Objekte keine Sicherheit erforderlich ist (außer durch Domänenfilterung), entschied ich mich, eine direkte Anfrage an den Browser des Benutzers zu stellen und die lokale Verarbeitung zu verwenden, um der Datei einen echten Namen zu geben Erweiterung.

Um das zu erreichen, habe ich diesen großartigen Artikel von Henry Algus benutzt: http://www.henryalgus.com/reading-binary-files-using-jquery-ajax/

1. Erster Schritt: Fügen Sie binäre Unterstützung zu jquery hinzu

/**
*
* jquery.binarytransport.js
*
* @description. jQuery ajax transport for making binary data type requests.
* @version 1.0 
* @author Henry Algus <[email protected]>
*
*/

// use this transport for "binary" data type
$.ajaxTransport("+binary", function (options, originalOptions, jqXHR) {
    // check for conditions and support for blob / arraybuffer response type
    if (window.FormData && ((options.dataType && (options.dataType == 'binary')) || (options.data && ((window.ArrayBuffer && options.data instanceof ArrayBuffer) || (window.Blob && options.data instanceof Blob))))) {
        return {
            // create new XMLHttpRequest
            send: function (headers, callback) {
                // setup all variables
                var xhr = new XMLHttpRequest(),
        url = options.url,
        type = options.type,
        async = options.async || true,
        // blob or arraybuffer. Default is blob
        dataType = options.responseType || "blob",
        data = options.data || null,
        username = options.username || null,
        password = options.password || null;

                xhr.addEventListener('load', function () {
                    var data = {};
                    data[options.dataType] = xhr.response;
                    // make callback and send data
                    callback(xhr.status, xhr.statusText, data, xhr.getAllResponseHeaders());
                });

                xhr.open(type, url, async, username, password);

                // setup custom headers
                for (var i in headers) {
                    xhr.setRequestHeader(i, headers[i]);
                }

                xhr.responseType = dataType;
                xhr.send(data);
            },
            abort: function () {
                jqXHR.abort();
            }
        };
    }
});

2. Zweiter Schritt: Erstellen Sie eine Anfrage mit diesem Transporttyp.

function downloadArt(url)
{
    $.ajax(url, {
        dataType: "binary",
        processData: false
    }).done(function (data) {
        // just my logic to name/create files
        var filename = url.substr(url.lastIndexOf('/') + 1) + '.png';
        var blob = new Blob([data], { type: 'image/png' });

        saveAs(blob, filename);
    });
}

Jetzt können Sie den erstellten Blob wie gewünscht verwenden, in meinem Fall möchte ich ihn auf Festplatte speichern.

3. Optional: Speichern Sie die Datei auf dem Computer des Benutzers mit FileSaver

Ich habe FileSaver.js verwendet, um die heruntergeladene Datei auf dem Datenträger zu speichern. Wenn Sie dies tun müssen, verwenden Sie bitte diese Javascript-Bibliothek:

https://github.com/eligrey/FileSaver.js/

Ich erwarte, dass dies anderen mit spezifischeren Bedürfnissen hilft.


Siehe " BLOB-Daten aus XHR-Anforderung abrufen", die darauf hinweist, dass BlobBuilder in Chrome nicht funktioniert. Sie müssen also Folgendes verwenden:

xhr.responseType = 'arraybuffer';

Wenn Sie die Datei trotzdem in einem Canvas-Bereich anzeigen, können Sie den Canvas-Inhalt auch in ein Blob-Objekt konvertieren.

canvas.toBlob(function(my_file){
  //.toBlob is only implemented in > FF18 but there is a polyfill 
  //for other browsers https://github.com/blueimp/JavaScript-Canvas-to-Blob
  var myBlob = (my_file);
})

Wie gengkev in seinem Kommentar oben anspricht, sieht es so aus, als ob der beste / einzige Weg dies mit einem asynchronen xhr2-Aufruf ist:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http%3A//your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    var myBlob = this.response;
    // myBlob is now the blob that the object URL pointed to.
  }
};
xhr.send();




blobs