In front-end development, we often meet the requirement of converting pictures to Base64 strings, and occasionally we also use the requirement of converting Base64 strings to picture files, so here we sort out the operation of converting Base64 and pictures/files, as shown below:

The image is converted to a Base64 string

There are two main methods for converting pictures to Base64 strings. One is to use Canvas to convert pictures to Base64 strings, but this method can only be used for converting pictures to Base64 strings, which is relatively fixed. Another option is to use the FileReader object, which can be used for any file, not just images. The specific code is as follows:

The use of canvas

<template>
  <img src="C:\\Users\\PF\\Pictures\\1575367887565.png" width="200" height="auto">
  <button id="btn">button</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>
Copy the code

Using 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]; // Get the file object
  const fileReader = new FileReader();
  fileReader.onload = function(e){
    base64String = this.result; // Assign the converted base64 string to base64String
  }
  fileReader.readAsDataUrl(file); // Read file as base64

  // reader.readAsText(File); Read as text
  // reader.readAsDataURL(File); Base64 format (you can use base64 after any address SRC) main image
  // reader.readAsBinaryString(File); Upload binary data in text form
  // reader.readAsArrayBuffer(File); Raw binary data
}
</script>
Copy the code

Base64 string is converted to a file

Base64 to file conversion is divided into two kinds: one is direct conversion, the other is indirect conversion. The direct conversion is to pass the Base64 string through new The File() method is directly converted to a File object, but this is not compatible with apple operating systems below IOS11.4. Another indirect method is to convert Base64 strings to Blob objects and then Blob objects to File objects, bypassing new File() is an incompatible bug on this system. The specific code is as follows:

Direct conversion

function dataURLtoFile(dataurl, filename) { 
  var arr = dataurl.split(', '),
  mime = arr[0].match(/ : (. *?) ; /) [1],
  bstr = atob(arr[1]),
  n = bstr.length,
  u8arr = new Uint8Array(n); Unit8Array = Unit8Array = Unit8Array = Unit8Array
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime }); // this new File() is not compatible with ios11.4
}
var file = dataURLtoFile(base64Data, imgName);
Copy the code

The indirect conversion

// First convert Base64 to 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 });
}
// Convert blob to file
function blobToFile(blob, name){
  blob.lastModifiedDate = new Date(a); blob.name = name;return blob;
}
var blob = dataURLtoBlob(base64Data);
var file = blobToFile(blob, imgName);
Copy the code