Konvertieren Sie den Daten-URI in eine Datei und hängen Sie ihn an FormData an

Ich habe versucht, einen HTML5-Bild-Uploader wie den auf der Mozilla Hacks- Website erneut zu implementieren , aber das funktioniert mit WebKit-Browsern. Ein Teil der Aufgabe besteht darin, eine Bilddatei aus dem canvasObjekt zu extrahieren und zum Hochladen an ein FormData- Objekt anzuhängen .

Das Problem ist, dass das FormData-Objekt zwar canvasdie toDataURLFunktion hat, eine Darstellung der Bilddatei zurückzugeben, jedoch nur Datei- oder Blob-Objekte von der Datei-API akzeptiert .

Die Mozilla-Lösung verwendete die folgende Nur-Firefox-Funktion für canvas:

var file = canvas.mozGetAsFile("foo.png");

... was in WebKit-Browsern nicht verfügbar ist. Die beste Lösung, die ich mir vorstellen kann, besteht darin, eine Möglichkeit zu finden, einen Daten-URI in ein Dateiobjekt zu konvertieren, von dem ich dachte, dass es Teil der Datei-API ist, aber ich kann für mein ganzes Leben nichts finden, um dies zu tun.

Ist es möglich? Wenn nicht, Alternativen?

Vielen Dank.

Nachdem ich mit ein paar Dingen herumgespielt hatte, gelang es mir, dies selbst herauszufinden.

Zunächst wird eine dataURI in einen Blob konvertiert:

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

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

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

Von dort aus ist es einfach, die Daten an ein Formular anzuhängen, sodass sie als Datei hochgeladen werden:

var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var blob = dataURItoBlob(dataURL);
var fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

BlobBuilder und ArrayBuffer sind jetzt veraltet. Hier ist der Code des obersten Kommentars, der mit dem Blob-Konstruktor aktualisiert wurde:

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

Dieser funktioniert in iOS und Safari.

Sie müssen die ArrayBuffer-Lösung von Stoive verwenden, können jedoch nicht BlobBuilder verwenden, wie vava720 angibt. Hier ist das Mashup von beiden.

function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], { type: 'image/jpeg' });
}

Firefox verfügt über die Methoden canvas.toBlob () und canvas.mozGetAsFile () .

Andere Browser jedoch nicht.

Wir können Dataurl von Canvas abrufen und dann Dataurl in Blob-Objekt konvertieren.

Hier ist meine dataURLtoBlob()Funktion. Es ist sehr kurz.

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

Verwenden Sie diese Funktion mit FormData, um Ihre Zeichenfläche oder Daten-URL zu verarbeiten.

Beispielsweise:

var dataurl = canvas.toDataURL('image/jpeg',0.8);
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("myFile", blob, "thumb.jpg");

Sie können auch eine HTMLCanvasElement.prototype.toBlobMethode für einen Browser ohne Gecko-Engine erstellen .

if(!HTMLCanvasElement.prototype.toBlob){
    HTMLCanvasElement.prototype.toBlob = function(callback, type, encoderOptions){
        var dataurl = this.toDataURL(type, encoderOptions);
        var bstr = atob(dataurl.split(',')[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr], {type: type});
        callback.call(this, blob);
    };
}

Funktioniert jetzt canvas.toBlob()für alle modernen Browser, nicht nur für Firefox. Zum Beispiel:

canvas.toBlob(
    function(blob){
        var fd = new FormData();
        fd.append("myFile", blob, "thumb.jpg");
        //continue do something...
    },
    'image/jpeg',
    0.8
);

Mein bevorzugter Weg ist canvas.toBlob ()

Aber hier ist noch eine andere Möglichkeit, base64 mit fetch ^^ in einen Blob umzuwandeln.

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

fetch(url)
.then(res => res.blob())
.then(blob => {
  var fd = new FormData()
  fd.append('image', blob, 'filename')
  
  console.log(blob)

  // Upload
  // fetch('upload', {method: 'POST', body: fd})
})

Dank @Stoive und @ vava720 habe ich beide auf diese Weise kombiniert, ohne den veralteten BlobBuilder und ArrayBuffer zu verwenden

function dataURItoBlob(dataURI) {
    'use strict'
    var byteString, 
        mimestring 

    if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
        byteString = atob(dataURI.split(',')[1])
    } else {
        byteString = decodeURI(dataURI.split(',')[1])
    }

    mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0]

    var content = new Array();
    for (var i = 0; i < byteString.length; i++) {
        content[i] = byteString.charCodeAt(i)
    }

    return new Blob([new Uint8Array(content)], {type: mimestring});
}

Der sich entwickelnde Standard scheint canvas.toBlob () zu sein, nicht canvas.getAsFile (), wie Mozilla zu erraten riskierte.

Ich sehe noch keinen Browser, der dies unterstützt :(

Danke für diesen tollen Thread!

Außerdem sollte jeder, der versucht, die akzeptierte Antwort zu erhalten, mit BlobBuilder vorsichtig sein, da ich finde, dass die Unterstützung begrenzt ist (und einen Namespace aufweist):

    var bb;
    try {
        bb = new BlobBuilder();
    } catch(e) {
        try {
            bb = new WebKitBlobBuilder();
        } catch(e) {
            bb = new MozBlobBuilder();
        }
    }

Haben Sie die Polyfüllung einer anderen Bibliothek für BlobBuilder verwendet?

var BlobBuilder = (window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder);

kann ohne den try catch verwendet werden.

Vielen Dank an check_ca. Gute Arbeit.

Die ursprüngliche Antwort von Stoive kann leicht behoben werden, indem die letzte Zeile geändert wird, um Blob aufzunehmen:

function dataURItoBlob (dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(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);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

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

Hier ist eine ES6-Version von Stoives Antwort :

export class ImageDataConverter {
  constructor(dataURI) {
    this.dataURI = dataURI;
  }

  getByteString() {
    let byteString;
    if (this.dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(this.dataURI.split(',')[1]);
    } else {
      byteString = decodeURI(this.dataURI.split(',')[1]);
    }
    return byteString;
  }

  getMimeString() {
    return this.dataURI.split(',')[0].split(':')[1].split(';')[0];
  }

  convertToTypedArray() {
    let byteString = this.getByteString();
    let ia = new Uint8Array(byteString.length);
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return ia;
  }

  dataURItoBlob() {
    let mimeString = this.getMimeString();
    let intArray = this.convertToTypedArray();
    return new Blob([intArray], {type: mimeString});
  }
}

Verwendungszweck:

const dataURL = canvas.toDataURL('image/jpeg', 0.5);
const blob = new ImageDataConverter(dataURL).dataURItoBlob();
let fd = new FormData(document.forms[0]);
fd.append("canvasImage", blob);

Vielen Dank! @steovi für diese Lösung.

Ich habe die ES6-Version unterstützt und von unescape zu dataURI geändert (unescape ist veraltet).

converterDataURItoBlob(dataURI) {
    let byteString;
    let mimeString;
    let ia;

    if (dataURI.split(',')[0].indexOf('base64') >= 0) {
      byteString = atob(dataURI.split(',')[1]);
    } else {
      byteString = encodeURI(dataURI.split(',')[1]);
    }
    // separate out the mime component
    mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ia], {type:mimeString});
}

mach es einfach: D.

function dataURItoBlob(dataURI,mime) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs

    var byteString = window.atob(dataURI);

    // separate out the mime component


    // write the bytes of the string to an ArrayBuffer
    //var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(byteString.length);
    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([ia], { type: mime });

    return blob;
}

toDataURL gibt Ihnen eine Zeichenfolge und Sie können diese Zeichenfolge in eine versteckte Eingabe einfügen.

Ich hatte genau das gleiche Problem wie Ravinder Payal und habe die Antwort gefunden. Versuche dies:

var dataURL = canvas.toDataURL("image/jpeg");

var name = "image.jpg";
var parseFile = new Parse.File(name, {base64: dataURL.substring(23)});