Question

在我的一个应用程序中，我使用http://fengyuanchen.github.io/cropper/

裁剪图像

生成的裁剪图像采用base64 dataURL格式，但我要求它采用文件对象格式。

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

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

Answer 2

How to convert dataURL to file object in javascript?

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

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

使用javascript将dataURL转换为文件

3 个答案: