使用JavaScript将DataURL转换为文件

Question

我有一个应用程序，使用http://fengyuanchen.github.io/cropper/来裁剪图片。

裁剪后的图像以base64数据URL格式呈现，但我需要将其转换为文件对象格式。

如何在客户端或服务器端将DataURL转换为文件？

- madhuchenna

Answer 1

请使用Blob而不是被弃用的BlobBuilder。这段代码非常干净和简单。（Manuel Di Iorio的代码已经不再被支持。）

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});
}
//test:
//var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');

Data URI scheme

- cuixiping

---

从那个里面呢？我该如何将它保存到本地文件中？@cuixiping - gumuruh

你可以使用 eligrey/FileSaver.js 将文件保存到本地磁盘。@gumuruh - cuixiping

Answer 2

如何在JavaScript中将DataURL转换为文件对象？

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(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
    var bb = new BlobBuilder();
    bb.append(ab);
    return bb.getBlob(mimeString);
}

然后只需将blob附加到新的FormData对象中，并使用ajax将其发送到您的服务器：

var blob = dataURItoBlob(someDataUrl);
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();

fd.append("myFile", blob);
xhr.open('POST', '/', true);
xhr.send(fd);

- Manuel Di Iorio

Answer 3

这是我的输入验证。

$data = $_POST['thumb'];
$uriPhp = 'data://' . substr($data, 5);

if ( base64_encode(base64_decode($uriPhp))){
    $_POST['thumb'] = $uriPhp;
} 

为了保存，我正在使用：http://www.verot.net/php_class_upload.htm

$foo = new Upload($_POST['thumb']);
    if ($foo->uploaded) {
      // save uploaded image with a new name
      $foo->file_new_name_body = $name;
      $foo->image_convert = 'png';
      $foo->Process("uploads/");
    }

- Peachyz