js blob與base64互轉、以及file和base64的相互轉換

本文轉載自查看原文 2021-06-02 10:52 2713 jquery、javascript

file和base64

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>

blob和base64

1. 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;
}

2.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= base64Data;
         var blob = dataURItoBlob(base64Data); //轉換為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>

案例1：js將文件轉成Base64編碼字符串

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>簡單的html5 File測試 for pic2base64</title>
<style>
　　*{margin:0;padding:0;box-s}
　　#txshow{width:300px;height:300px; border:none;}
</style>
<script>
    window.onload = function () {
        var input = document.getElementById("fielinput");
        var txshow = document.getElementById("txshow");
        if (typeof (FileReader) === 'undefined') {
            result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader，請使用現代瀏覽器操作！";
            input.setAttribute('disabled', 'disabled');
        } else {
            input.addEventListener('change', readFile, false);
            txshow.onclick = function () { input.click(); }
        }
    }
    function readFile() {
        var file = this.files[0];
        //判斷是否是圖片類型
        /*if (!/image\/\w+/.test(file.type)) {
            alert("只能選擇圖片");
            return false;
        }*/
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) { 
            txshow.src = this.result; 
            document.getElementById("data").innerText=this.result.substring(this.result.indexOf(',')+1); 
        }
    }
</script>
</head>
<body>
　　<input type="file" id="fielinput" />
　　<img id="txshow" />
　　<p/>解析之后的base64數據：<p/>
　　<div id="data"></div>
</body>
</html>

參考：https://blog.csdn.net/qq_34664239/article/details/94595508

　　 https://www.cnblogs.com/webuserlast/p/4842498.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js - blob流和base64，以及file和base64的相互轉換 base64和Blob的相互轉換 base64 和 Blob 相互轉換 base64,file和blob相互轉換 JS 實現blob與base64互轉 base64和圖片的相互轉換關於圖片或者文件中的base64,File,blob 三者相互轉換 js 實現 Base64 編碼的相互轉換 js 實現 Base64 編碼的相互轉換 Base64與File之間的相互轉化