Konversikan Data URI ke File lalu tambahkan ke FormData

Saya telah mencoba menerapkan kembali pengunggah gambar HTML5 seperti yang ada di situs Mozilla Hacks , tetapi itu bekerja dengan browser WebKit. Bagian dari tugas adalah untuk mengekstrak file gambar dari canvasobjek dan menambahkannya ke objek FormData untuk diunggah.

Masalahnya adalah bahwa sementara canvasmemiliki toDataURLfungsi untuk mengembalikan representasi file gambar, objek FormData hanya menerima objek File atau Blob dari File API .

Solusi Mozilla menggunakan fungsi khusus Firefox berikut ini pada canvas:

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

... yang tidak tersedia di browser WebKit. Solusi terbaik yang dapat saya pikirkan adalah menemukan beberapa cara untuk mengubah URI Data menjadi objek File, yang saya pikir mungkin menjadi bagian dari File API, tetapi saya tidak dapat seumur hidup menemukan sesuatu untuk melakukan itu.

Apa itu mungkin? Jika tidak, ada alternatif lain?

Terima kasih.

Setelah bermain-main dengan beberapa hal, saya berhasil mencari tahu sendiri.

Pertama-tama, ini akan mengubah dataURI menjadi gumpalan:

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

Dari sana, menambahkan data ke formulir sedemikian rupa sehingga mudah diunggah sebagai file:

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

BlobBuilder dan ArrayBuffer sekarang tidak digunakan lagi, berikut ini adalah kode komentar teratas yang diperbarui dengan 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'});
}

Yang ini berfungsi di iOS dan Safari.

Anda perlu menggunakan solusi ArrayBuffer Stoive tetapi Anda tidak dapat menggunakan BlobBuilder, seperti yang ditunjukkan oleh vava720, jadi inilah gabungan keduanya.

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 memiliki metode canvas.toBlob () dan canvas.mozGetAsFile () .

Tetapi browser lain tidak.

Kita bisa mendapatkan dataurl dari kanvas dan kemudian mengkonversi dataurl ke objek gumpalan.

Inilah dataURLtoBlob()fungsi saya . Ini sangat singkat.

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

Gunakan fungsi ini dengan FormData untuk menangani kanvas atau dataurl Anda.

Sebagai contoh:

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

Anda juga dapat membuat HTMLCanvasElement.prototype.toBlobmetode untuk browser engine non 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);
    };
}

Sekarang canvas.toBlob()berfungsi untuk semua browser modern, tidak hanya Firefox. Sebagai contoh:

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

Cara pilihan saya adalah canvas.toBlob ()

Namun bagaimanapun juga di sini adalah cara lain untuk mengubah base64 menjadi gumpalan menggunakan fetch ^^,

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

Berkat @Stoive dan @ vava720 saya menggabungkan keduanya dengan cara ini, menghindari menggunakan BlobBuilder dan ArrayBuffer yang sudah usang.

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

Standar yang berkembang tampaknya kanvas.toBlob () bukan canvas.getAsFile () seperti yang bisa ditebak oleh Mozilla.

Saya belum melihat browser yang mendukungnya :(

Terima kasih untuk utas yang luar biasa ini!

Juga, siapa pun yang mencoba jawaban yang diterima harus berhati-hati dengan BlobBuilder karena saya menemukan dukungan terbatas (dan namespace):

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

Apakah Anda menggunakan polyfill perpustakaan lain untuk BlobBuilder?

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

dapat digunakan tanpa try catch.

Terima kasih untuk check_ca. Kerja bagus.

Jawaban asli oleh Stoive mudah diperbaiki dengan mengubah baris terakhir untuk mengakomodasi 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});
}

Ini adalah versi ES6 dari jawaban Stoive :

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

Pemakaian:

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

Terima kasih! @steovi untuk solusi ini.

Saya telah menambahkan dukungan ke versi ES6 dan berubah dari unescape ke dataURI (unescape sudah usang).

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

sederhanakan: 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 memberi Anda sebuah string dan Anda dapat meletakkan string itu ke input tersembunyi.

Saya memiliki masalah yang sama persis dengan Ravinder Payal, dan saya telah menemukan jawabannya. Coba ini:

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

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