Veri URI sonra Ekleme FormData Dosyasını dönüştürmek

SORU

15 ŞUBAT 2011, Salı

Veri URI sonra Ekleme FormData Dosyasını dönüştürmek

** 10 bir site gibi yeniden uygulamak HTML5 görüntü aktarıcı için çalışıyorum, ama aynı zamanda Y tarayıcıları ile çalışır. Bu görevin bir parçası canvas nesneden bir resim dosyası ayıklamak ve yüklemek için FormData bir nesne eklemek için.

Sorun canvas toDataURL görüntü dosyasının bir temsili dönmek için işlevi vardır, FormData nesne yalnızca File API Dosya veya Blob nesneleri kabul eder.

Mozilla çözümü canvas fonksiyon: Firefox-sadece aşağıdaki kullanılır

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

...Y tarayıcılarda mevcut değil. En iyi çözüm aklıma bulmak bir şekilde dönüştürmek için bir Veri URI içine bir Dosya nesnesi, düşündüm olabilir parçanın Dosya API, ama yapamam için hayat bana bir şey bulun.

Mümkün mü? Eğer değilse, herhangi bir alternatif?

Teşekkürler.

CEVAP

24 ŞUBAT 2011, PERŞEMBE

Bir kaç şey ile oynamak sonra, bunu kendim başardım.

Her şeyden önce, bu bir Blob bir dataURİ 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 bir form dosyası olarak yüklenmiş olması gibi veri ekleme 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);

Bunu Paylaş: