1.file文件转换为base64,得到base64格式图片
var reader = new FileReader();
reader.readAsDataURL(this.files[0]);
reader.onload = function(){
console.log(reader.result); //获取到base64格式图片
};
2.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});
}
测试案例:
<input type="file" name="" id="imgfile">
<script>
var base64Img = '';
document.getElementById('imgfile').onchange = function(){
var fileReader = new FileReader();
fileReader.readAsDataURL(this.files[0]);
fileReader.onload = function(){
base64Img = fileReader.result;
console.log(dataURLtoFile(base64Img,'img11'))
}
}
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});
}
</script>
3.base64转换为blob流
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
4.blob流转换为base64
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
}
}
测试案例,可直接复制运行
<input type="file" id="imgfile">
<\img src="" id="img" alt=""> //这里图片总是转义,暂且这么写,知道是img就行
<\img src="" id="img2" alt="">
<script>
document.getElementById('imgfile').onchange = function(){
reads(this.files[0],function(base64Data){ //获取图片的base64格式,显示
document.getElementById("img").src= reader.result;
var blob = dataURItoBlob(reader.result); //转换为blob格式
blobToDataURI(blob,function(result){ //blob格式再转换为base64格式
document.getElementById('img2').src = result;
})
});
}
function reads(_file,callback){
var reader = new FileReader();
reader.readAsDataURL(_file);
reader.onload = function(){
callback(reader.result);
};
}
function dataURItoBlob(base64Data) {
//console.log(base64Data);//data:image/png;base64,
var byteString;
if(base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);//base64 解码
else{
byteString = unescape(base64Data.split(',')[1]);
}
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];//mime类型 -- image/png
// var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组
// var ia = new Uint8Array(arrayBuffer);//创建视图
var ia = new Uint8Array(byteString.length);//创建视图
for(var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var blob = new Blob([ia], {
type: mimeString
});
return blob;
}
function blobToDataURI(blob, callback) {
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function (e) {
callback(e.target.result);
}
}
</script>
html5中Blob是什么?js如何创建Blob对象?Blob类型转换:String转换成Blob对象、TypeArray转换成 Blob对象 、ArrayBuffer转Blob、将Blob对象转换成String字符串,使用FileReader的readAsText方法 、将Blob对象转换成ArrayBuffer
图片以独立文件的形式存储在服务器的指定文件夹中,再将路径存入数据库字段中;将图片转换成blob,直接存储到数据库的 Image 类型字段中(这种方式负担很大不建议使用)
canvas转dataURL:canvas对象、转换格式、图像品质;DataURL转canvas;image转canvas:图片地址;dataURL转image,这个不需要转,直接给了src就能用
最近遇到一个需求,需要将页面中的配置信息下载下来供用户方便使用,以前这个场景的需求有时候会放到后端处理,然后给返回一个下载链接。其实并不需要这么麻烦,这样既增大了服务器的负载
ArrayBuffer 对象与 Blob 对象大家或许不太陌生,常见于文件上传操作处理(如处理图片上传预览等问题)。那么本文将与大家深入介绍两者。ArrayBuffer 对象是 ES6 才纳入正式 ECMAScript 规范
Blob(Binary Large Object)表示二进制类型的大对象。在数据库管理系统中,将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!