前端 文件操作

• 选择文件预览、压缩
• 压缩文件 （canvas）
• base64/canvas 转 blob
• blob 转 base64

选择文件预览、压缩

/**
 * input change事件
 * @param $event <input/> dom对象
 */
imgChange($event) {
  const reader = new FileReader();
  const imgFile = $event.target.files[0];
  // console.log(imgFile);
  reader.onload = ((eve) => {
    const result = eve.target.result;
    const newImg = new Image();
    newImg.src = result;
    newImg.onload = () => {
      const imgInfo = this.imgCompress(newImg, imgFile.type);
      // console.log(imgInfo);
    };
  }).bind(this);
  reader.readAsDataURL(imgFile); // 读取文件对象[obj]
}

压缩文件 （canvas）

/**
 * 压缩图片
 * @param img 原图片
 * @param type 转换类型
 * @param leval 压缩比例，0-1，越小  越模糊
 */
imgCompress(img, type = 'image/jpeg', leval = .3) {
  const width = img.width * leval;
  const height = img.height * leval;
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const context = canvas.getContext('2d');  // 绘图环境
  context.drawImage(img, 0, 0, width, height);
  // 将原来图片的质量压缩到原先的leval倍。
  const base64 = canvas.toDataURL(type, leval); // data url的形式
  const blob = this.dataURLtoBlob(base64);
  // console.log(base64);
  return {
    base64,
    blob
  };
}

base64/canvas 转 blob

/**
 * base64文件转 blob
 * @param dataurl base64编码文件
 */
dataURLtoBlob(dataurl) {
  const arr = dataurl.split(',');
  const mime = arr[0].match(/:(.*?);/)[1];
  const bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

/**
 * canvas 转 blob
 * @param type 指定转换的图片的格式
 * @param leval 压缩比例 0-1
 */
canvasToBlob(canvas, type = 'image/jpeg', leval = .3){
  canvas.toBlob(function(blob){
    console.log(blob);
  }, type, leval);
  // toBlob 方法： type 默认 'image/jpeg'
}

blob 转 base64

/**
 * 将 blob对象（file 继承了 blob） 转 base64
 * @param blob blob对象
 */
base64ToBlob(blob) {
  const reader = new FileReader();
  reader.onload = ((eve) => {
    const result = eve.target.result;
    cosnole.log(result);
  }).bind(this);
  reader.readAsDataURL(blob); // 读取文件对象[obj]
}