Konwertuj URI danych na plik, a następnie dołącz do FormData

Próbowałem ponownie wdrożyć program do przesyłania obrazów HTML5, taki jak ten na stronie Mozilla Hacks , ale działa on z przeglądarkami WebKit. Częścią zadania jest wyodrębnienie pliku obrazu z canvasobiektu i dołączenie go do obiektu FormData w celu przesłania.

Problem polega na tym, że chociaż canvasma toDataURLfunkcję zwracania reprezentacji pliku obrazu, obiekt FormData akceptuje tylko obiekty File lub Blob z interfejsu API File .

W rozwiązaniu Mozilla zastosowano następującą funkcję tylko dla Firefoksa canvas:

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

... który nie jest dostępny w przeglądarkach WebKit. Najlepszym rozwiązaniem, jakie mogłem wymyślić, było znalezienie sposobu na konwersję identyfikatora URI danych na obiekt File, który moim zdaniem może być częścią interfejsu API File, ale przez całe życie nie mogę znaleźć czegoś takiego.

Czy to możliwe? Jeśli nie, jakieś alternatywy?

Dzięki.

Po zabawie z kilkoma rzeczami sam to odkryłem.

Przede wszystkim spowoduje to konwersję dataURI na obiekt Blob:

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

Stamtąd dołączanie danych do formularza, który zostanie przesłany jako plik, jest łatwe:

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

BlobBuilder i ArrayBuffer są teraz przestarzałe, oto kod najwyższego komentarza zaktualizowany o konstruktor Blob:

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'});
}

Ten działa w iOS i Safari.

Musisz użyć rozwiązania ArrayBuffer firmy Stoive, ale nie możesz używać BlobBuilder, jak wskazuje vava720, więc oto połączenie obu.

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 ma metody canvas.toBlob () i canvas.mozGetAsFile () .

Ale inne przeglądarki nie.

Możemy pobrać dataurl z kanwy, a następnie przekonwertować dataurl na obiekt blob.

Oto moja dataURLtoBlob()funkcja. Jest bardzo krótki.

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

Użyj tej funkcji z FormData do obsługi obszaru roboczego lub bazy danych.

Na przykład:

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

Możesz także utworzyć HTMLCanvasElement.prototype.toBlobmetodę dla przeglądarki silnika innego niż gecko.

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

Teraz canvas.toBlob()działa dla wszystkich nowoczesnych przeglądarek nie tylko Firefox. Na przykład:

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

Mój preferowany sposób to canvas.toBlob ()

Ale w każdym razie tutaj jest jeszcze inny sposób przekonwertowania base64 na obiekt blob przy użyciu funkcji pobierania ^^,

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})
})

Dzięki @Stoive i @ vava720 połączyłem je w ten sposób, unikając używania przestarzałych BlobBuilder i ArrayBuffer

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

Ewoluujący standard wygląda na canvas.toBlob (), a nie canvas.getAsFile (), jak zgadywał Mozilla.

Nie widzę jeszcze żadnej przeglądarki, która to obsługuje :(

Dzięki za ten świetny wątek!

Ponadto każdy, kto próbuje zaakceptować odpowiedź, powinien zachować ostrożność w przypadku BlobBuilder, ponieważ uważam, że wsparcie jest ograniczone (i przestrzeń nazw):

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

Czy używałeś wypełniania innej biblioteki dla BlobBuilder?

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

może być użyty bez try catch.

Podziękowania dla check_ca. Świetna robota.

Oryginalną odpowiedź Stoive'a można łatwo naprawić, zmieniając ostatnią linię, aby pomieścić Blob:

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

Oto wersja odpowiedzi Stoive na ES6 :

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

Stosowanie:

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

Dzięki! @steovi dla tego rozwiązania.

Dodałem obsługę wersji ES6 i zmieniłem z unescape na dataURI (unescape jest przestarzały).

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

uprość: 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 daje ci ciąg, który możesz umieścić w ukrytym wejściu.

Miałem dokładnie taki sam problem jak Ravinder Payal i znalazłem odpowiedź. Spróbuj tego:

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

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