base64转化为blob,blob转化为file

背景:最近在做一个移动端手写签名的功能。需求是将手写签名生成图片存到后台,实现步骤:canvas画图,生成base64,将base64转为file对象。

1,canvas具体怎么实现手写签名,不在细讲,主要是touchmove.touchstart,touchend事件和canvas画笔工具结合,生成base64,原生方法toDataURL(),就可以将其转化为base64。以上不是重点，重点是将base64转为file，代码如下

    function dataURLtoFile(dataurl, filename) {//将base64转换为文件
        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 File([u8arr], filename, {type:mime});
    }

2，但是这种方式，低版本的浏览器是不支持的，具体不支持Uint8Array（）还是File（）不是很确定。

Uint8Array（）有polyfill，我就直接引用了地址：typedarray.js

需要注意的是原作者规定了数组最大长度是 1e5（10000），如果你的数组比这个还大，需要手动改一下源代码 MAX_ARRAY_LENGTH 的值。但作者之所以设了这么一个最大值，是因为在低版本浏览器里用 Array 来模拟 BufferArray 的话是有性能问题的，所以慎重使用。

但是File（）我没有找到polyfill，所有将代码改写：

//将base64转换为blob对象 解决低版本浏览器兼容问题
function dataURLtoBlob(dataurl) {
	var arr = dataurl.split(',');
	var bstr = atob(arr[1]);
	var n = bstr.length;
        var mime = arr[0].match(/:(.*?);/)[1],
	var u8arr = new Uint8Array(n);
	while(n--){
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {type: mime });
}

//将blob转换成file
function blobToFile(theBlob, fileName){
	theBlob.lastModifiedDate =new Date();
	theBlob.name = fileName;
	return theBlob;
}


// 调用 dataurl为base64字符串  filename为文件名字,自己自定义

var file = blobToFile(dataURLtoBlob(dataurl), fileName)

这样就解决了低版本浏览器的兼容问题,成功将文件提交到后台,具体后台怎么处理的我不是很清楚,我只是个比较菜的前端.