js中将图片文件转成base64

js中将图片文件转为base的两种方式

1. fileReader

 <input type="file" id="file" onchange="changeFile()">

function changeFile() {
  var file = document.getElementById('file').files[0]
  //检验选择文件格式
  var fileType = file.name.split('.').reverse()[0].toLowerCase()
  var imageList = ['png','gif','jpg','jpeg']//图片文件格式列表
  if(!imageList.includes(fileType)){
      alert('文件格式不正确')
      return false
  }
  // 创建文件读取实例
  var fileReader = new FileReader()
  fileReader.readAsDataURL(file)
  fileReader.onload = (e) => {
    var imageBase64 = e.target.result //获取base64字符串
  }
}

2. canvas

var canvas = document.createElement('canvas')
var image = new Image()
img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题
image.src = './demo.png'  //图片路径
var context = canvas.getContext('2d')
context.drawImage(image, 0, 0, 200, 200)
var imageBase64 = canvas.toDataURL() //imageBase64就是想要获取的内容