前端Base64字符串和文件(图片)的相互转换

前端开发中,经常会遇到需要把图片转换为Base64字符串的需求,偶尔也会用到把base64字符串转换为图片文件的需求,所以在这里整理一下Base64和图片/文件的相互转换操作,具体如下文所示:

图片转换为Base64字符串

图片转换为Base64字符串主要有两种方法,其一就是使用canvas将图片转换为Base64字符串,但是这种方式只能用于图片到Base64字符串的转换,比较固定;另外一种就是使用FileReader对象,该方法可以针对任何文件,不局限于图片.具体代码如下:

使用canvas

<template>
  <img src="C:\\Users\\PF\\Pictures\\1575367887565.png" width="200" height="auto">
  <button id="btn">按钮</button>
</template>
<script>
function toBase64(img){
  let canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  let context = canvas.getContext('2d');
  context.drawImage(img, 0, 0, img.width, img.height);
  let dataurl = canvas.toDataURL();
  return dataurl;
}
let btn = document.querySelector('#btn');
btn.addEventListener('click', event => {
  let img = document.querySelector('img');
  let str = toBase64(img);
  console.log(str);
})
</script>

使用FileReader

<template>
  <input id="file" type="file">
</template>
<script>
let base64String = "";
const fileDom = document.querySelector('#file');
file.onchange = function(event){
  const file = event.target.files[0]; // 获取到file对象
  const fileReader = new FileReader();
  fileReader.onload = function(e){
    base64String = this.result; // 将转换好的base64字符串赋给base64String
  }
  fileReader.readAsDataUrl(file); // 将file作为base64读取

  // reader.readAsText(File); 		读取为文本
  // reader.readAsDataURL(File); 	base64格式(任何地址src后都可以用base64) 主要图片
  // reader.readAsBinaryString(File);	二进制的文本形式数据 	上传
  // reader.readAsArrayBuffer(File); 	原始二进制数据
}
</script>

Base64字符串转换为文件

Base64到文件的转换分为两种: 一种是直接转换,另外一种是间接转换.所谓的直接转换就是将Base64字符串通过new File()的方式直接转换为文件对象,但是这种方式在苹果IOS11.4以下的操作系统上并不兼容,另外一种间接转换则可以做到兼容该系统,方法就是先把Base64字符串转换为Blob对象,然后将Blob对象转换为File对象,由此绕过new File()在该系统上不兼容的bug.具体代码如下:

直接转换

function dataURLtoFile(dataurl, filename) { 
  var arr = dataurl.split(','),
  mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n); // 这里用Array也能通过,但是并不知道为什么网上都用Unit8Array
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime }); // 就是这个 new File() 在ios11.4以下系统不兼容
}
var file = dataURLtoFile(base64Data, imgName);

间接转换

// 先将Base64转换为blob
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 });
}
// 再将blob转换为file
function blobToFile(blob, name){
  blob.lastModifiedDate = new Date();
  blob.name = name;
  return blob;
}
var blob = dataURLtoBlob(base64Data);
var file = blobToFile(blob, imgName);