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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • HouseholdHacker

    HouseholdHac

    6 Kasım 2007
  • modica89

    modica89

    24 HAZİRAN 2007
  • TeeMayneTV

    TeeMayneTV

    27 Kasım 2010