Veri URI'sini Dosyaya Dönüştür, sonra FormData'ya ekle

Mozilla Hacks sitesindeki gibi bir HTML5 resim yükleyiciyi yeniden uygulamaya çalışıyorum , ancak WebKit tarayıcılarıyla çalışıyor. Görevin bir kısmı, bir görüntü dosyasını canvasnesneden ayıklamak ve yüklemek için bir FormData nesnesine eklemektir .

Sorun, görüntü dosyasının bir temsilini döndürme işlevine sahip olsa canvasda, toDataURLFormData nesnesi yalnızca Dosya API'sından File veya Blob nesnelerini kabul eder .

Mozilla çözümü aşağıdaki Firefox'a özel aşağıdaki işlevi kullanmıştır canvas:

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

... WebKit tarayıcılarında mevcut değil. Düşünebileceğim en iyi çözüm, Veri API'sini Dosya API'sine dönüştürmenin bir yolunu bulmaktır, ki bu da Dosya API'sinin bir parçası olabileceğini düşündüm, ancak hayatım boyunca bunu yapacak bir şey bulamıyorum.

Mümkün mü? Değilse, başka alternatifler var mı?

Teşekkürler.

Birkaç şeyle oynadıktan sonra bunu kendim çözmeyi başardım.

Her şeyden önce, bu bir dataURI'yi bir Blob'a dönüştürür:

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

Oradan, verileri bir dosyaya yüklenecek şekilde bir forma eklemek kolaydır:

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

BlobBuilder ve ArrayBuffer artık kullanımdan kaldırıldı, en iyi yorumun Blob yapıcısı ile güncellenen kodu:

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

Bu iOS ve Safari'de çalışıyor.

Stoive'ın ArrayBuffer çözümünü kullanmanız gerekiyor, ancak vava720'nin belirttiği gibi BlobBuilder'ı kullanamazsınız, bu yüzden her ikisinin karışımı.

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'un canvas.toBlob () ve canvas.mozGetAsFile () yöntemleri vardır.

Ancak diğer tarayıcılar bunu yapmaz.

Tuvalden dataurl alabilir ve daha sonra dataurl'u blob nesnesine dönüştürebiliriz.

İşte benim dataURLtoBlob()fonksiyonum. Çok kısa.

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

Tuvalinizi veya dataurl'nizi işlemek için FormData ile bu işlevi kullanın.

Örneğin:

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

Ayrıca, HTMLCanvasElement.prototype.toBlobgecko olmayan motor tarayıcı için bir yöntem oluşturabilirsiniz .

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

Artık canvas.toBlob()sadece Firefox için değil, tüm modern tarayıcılar için çalışıyor. Örneğin:

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

Tercih ettiğim yol canvas.toBlob ()

Ama yine de burada fet64 kullanarak base64 bir blob dönüştürmek için başka bir yoludur,

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

@Stoive ve @ vava720 sayesinde, kullanımdan kaldırılmış BlobBuilder ve ArrayBuffer'ı kullanmaktan kaçınarak ikisini bu şekilde birleştirdim.

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

Gelişen standart Mozilla'nın tahmin etmesi tehlikeye düştüğü için canvas.getBlob () değil canvas.getAsFile () gibi görünüyor.

Henüz destekleyen bir tarayıcı göremiyorum :(

Bu harika konu için teşekkürler!

Ayrıca, sınırlı yanıtı (ve ad boşluklu) destek bulduğum için, kabul edilen yanıtı deneyen herkes BlobBuilder'e dikkat etmelidir:

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

BlobBuilder için başka bir kütüphanenin çoklu dolgusunu mu kullanıyordunuz?

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

try catch olmadan kullanılabilir.

Check_ca'ya teşekkürler. Harika iş.

Stoive'ın orijinal cevabı, Blob'a uygun son satırı değiştirerek kolayca düzeltilebilir:

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

İşte Stoive'ın cevabının ES6 sürümü :

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

Kullanımı:

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

Teşekkürler! @steovi bu çözüm için.

ES6 sürümüne destek ekledim ve unescape'ten dataURI'ye geçtim (unescape kullanımdan kaldırıldı).

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

basitleştirin: 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 size bir dize verir ve bu dizeyi gizli bir girişe koyabilirsiniz.

Ravinder Payal ile tamamen aynı problemi yaşadım ve cevabı buldum. Bunu dene:

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

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