我有一个应用程序,使用http://fengyuanchen.github.io/cropper/来裁剪图片。
裁剪后的图像以base64数据URL格式呈现,但我需要将其转换为文件对象格式。
如何在客户端或服务器端将DataURL转换为文件?
我有一个应用程序,使用http://fengyuanchen.github.io/cropper/来裁剪图片。
裁剪后的图像以base64数据URL格式呈现,但我需要将其转换为文件对象格式。
如何在客户端或服务器端将DataURL转换为文件?
请使用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==');
如何在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);
这是我的输入验证。
$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/");
}