预览图片，FileReader，可以读取File和Blob对象，并转为base64格式的图片

  <input type="file" id="input" accept="image/*" onchange="loadFiles(event)" />
  <br />
  <img alt="" style="width:300px;height: 300px;" id="img">
</body>
</html>
<script>
  const img = document.querySelector('#img');
  function file2DataUrl(file, callback) {
 var reader = new FileReader();
  reader.onload = function () {
    // 转换完成
    console.log(reader.result);
    // data:image/png;base64,iVBOR...R4XuxdB5g
    callback(reader.result);
  };
  // 转为base64字符串
  reader.readAsDataURL(file);
}

const loadFiles = (event) => {
  console.log(event);
  const file = event.target.files[0];
  file2DataUrl(file, (base64) => {
    img.src = base64
  })
}

预览图片，URL.createObjectURL，可以读取File和Blob对象，转为blob格式的字符串地址

  <input type="file" id="input" accept="image/*" onchange="loadFiles(event)" />
  <br />
  <img alt="" style="width:300px;height: 300px;" id="img">
  <div id="wrap"></div>
</body>

</html>

<script>
  const img = document.querySelector('#img');
  const div = document.querySelector('#wrap');

  function file2Image(file, callback) {
    var image = new Image();
    var URL = window.webkitURL || window.URL;
    if (URL) {
      // 'blob:http://127.0.0.1:5500/43...4-a96d0150edc0'
      var blobUrl = URL.createObjectURL(file);
      image.onload = function () {
        callback(image);
        URL.revokeObjectURL(blobUrl);
      };
      image.src = blobUrl;
    }
  }

  const loadFiles = (event) => {
    console.log(event);
    const file = event.target.files[0];
    file2Image(file, (image) => {
      div.append(image)
    })
  }

预览图片、压缩图片，file转canvas，canvas转base64,canvas转blob对象

  <input type="file" id="input" accept="image/*" onchange="loadFiles(event)" />
  <br />
  <img alt="" style="width:300px;height: 300px;" id="img">
  <div id="wrap"></div>
</body>

</html>

<script>
  const img = document.querySelector('#img');
  const div = document.querySelector('#wrap');

  function file2Image(file, callback) {
    var image = new Image();
    var URL = window.webkitURL || window.URL;
    if (URL) {
      var url = URL.createObjectURL(file);
      image.onload = function () {
        callback && callback(image);
        URL.revokeObjectURL(url);
      };
      image.src = url;
      return image;
    }
  }
  // 生成canvas元素
  function image2Canvas(image) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    console.log(canvas.width, canvas.height);
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    return canvas;
  }

  const loadFiles = (event, type, quality) => {
    const file = event.target.files[0];
    console.log(file);
    file2Image(file, (image) => {
      // 带有src的image实例
      console.log(image);
      div.append(image)
      const canvas = image2Canvas(image);
      div.append(canvas)
      console.log(canvas);
      // 通过控制quality的值（0-1）实现简易压缩，type通常为jpeg格式，因为png图片压缩会出现“压缩率不高”，“不减反增”，“黑屏现象”等问题
      const base64 = canvas.toDataURL(type || 'image/jpeg', quality || 0.8);
      console.log(base64);
      img.src = base64;
      // 转为blob对象，有size、type属性
      canvas.toBlob(function (blob) {
        console.log('blob', blob);
        // 也可转为blob url
        file2Image(blob);
      }, type || 'image/jpeg', quality || 0.8);
    })
  }

base64转blob

  // blob对象的size与file对象的size可以比较（同一张图片它们的size相等）
  function dataURLtoFile(base64) {
    let binary = atob(base64.split(",")[1]);
    let array = [];
    for (let i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], {
      type: 'image/png'
    });
  }

base64转file

  function dataURLtoFiles(base64, filename) {
    var arr = base64.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
    });
  }

blob转file

    let fileFormat = new File([blob], 'test.jpg', {
      type: blob.type
    })
    console.log("File对象", fileFormat);

file转blob

  // 同一个图片，dataUrlToBlob保存原有size值，fileToBlob则比原有size值大
  function fileToBlob(file) {
    let reader = new FileReader();
    reader.onload = (e) => {
      let base64 = e.target.result;
      let blob = new Blob([base64], {
        type: file.type
      });
      console.log("Blob对象", blob);
    }
    reader.readAsDataURL(file)
  }

  function dataUrlToBlob(base64, mimeType) {
    let bytes = window.atob(base64.split(",")[1]);
    let ab = new ArrayBuffer(bytes.length);
    let ia = new Uint8Array(ab);
    for (let i = 0; i < bytes.length; i++) {
      ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab], {
      type: mimeType
    });
  }

上传图片

 // formData上传file对象
 var fd = new FormData();
 fd.append('file', file);
 // FileReader上传二进制数据
 var reader = new FileReader();
 xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
 reader.onload = function() {
    xhr.send(reader.result);
 };
 // reader.readAsDataURL(file);base64字符串
 reader.readAsBinaryString(file);二进制数据，已废弃
 // reader.readAsArrayBuffer(file);arrayBuffer
 // reader.readAsText(file);转为指定编码的字符串

压缩图片

  <input type="file" id="input" accept="image/*" onchange="loadFiles(event)" />
  // 生成image实例
  function file2Image(file, callback) {
    var image = new Image();
    var URL = window.webkitURL || window.URL;
    if (URL) {
      var url = URL.createObjectURL(file);
      console.log('blob url', url);
      image.onload = function () {
        callback(image);
        URL.revokeObjectURL(url);
      };
      image.src = url;
      return image;
    }
  }
  // 图片实例转为canvas
  function image2Canvas(image) {
    console.log('image', image);
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = image.naturalWidth;
    canvas.height = image.naturalHeight;
    console.log(canvas.width, canvas.height);
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
    return canvas;
  }

  let n = 0;
  const loadFiles = (event) => {
    const file = event.target.files[0];
    console.log(file);
    console.log('file size', file.size / 1024 / 1024);

    const fn = (file) => {
      // 5M
      if (file.size <= 5242880) {
        // 压缩后的file和压缩次数
        console.log('n====',file, n);
        return file;
      }
      file2Image(file, (image, type, quality) => {
        console.log('实例', image);
        // div.append(image)
        const canvas = image2Canvas(image);
        // div.append(canvas)
        console.log('canvas', canvas);
        // const base64 = canvas.toDataURL(type || 'image/jpeg', quality || 0.1);
        // console.log('base64', base64);
        canvas.toBlob(function (blob) {
          // 压缩次数统计
          n++;
          console.log('blob---', blob);
          console.log('size', blob.size / 1024 / 1024);
          fn(blob);
        }, type || 'image/jpeg', 0.8);
        // console.log(base64);
        // img.src = base64;
      })
    }

    fn(file);
  }