js项目中常见util方法

获取video中的第一帧转化成图片

export const getVideoBase64 =  (url)=> {
  return new Promise(function (resolve, reject) {
    let dataURL = '';
    let video = document.createElement("video");
    video.setAttribute('crossOrigin', 'anonymous');//处理跨域
    video.setAttribute('src', url);
    video.setAttribute('width', 96);
    video.setAttribute('height', 54);
    video.setAttribute('preload', 'auto');
    video.setAttribute('autoplay', 'autoplay')
    video.addEventListener('loadeddata', function () {
      let canvas = document.createElement("canvas")
      let  width = video.width //canvas的尺寸和图片一样
      let  height = video.height
      canvas.width = width;
      canvas.height = height;
      canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
      dataURL = canvas.toDataURL('image/png'); //转换为base64
      resolve(dataURL);
    });  
  })
}

base64转file

export const dataURLtoFile = (dataurl, filename) => {
  // 获取到base64编码
  const arr = dataurl.split(',')
  // 将base64编码转为字符串
  const bstr = window.atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, {
    type: 'image/jpeg'
  })
}

文件流Blob转化成图片url

export const BlobToUrl = (bstr) => {
  const blob = new Blob([bstr], { type: 'image/jpeg' })
  return (window.URL || window.webkitURL).createObjectURL(blob)
}

图片url转base64

export const convertImgToBase64 = (url, callback, outputFormat) => {
  var canvas = document.createElement("CANVAS"),
    ctx = canvas.getContext("2d"),
    img = new Image();
  img.crossOrigin = "Anonymous";
  img.onload = function() {
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL(outputFormat || "image/png");
    callback.call(this, dataURL);
    canvas = null;
  };
  img.src = url;
};

base64或url下载图片，可指定宽高，当只指定其中一个时候等比例缩放

// url下载图片
export const downLoadImgByA = ({ url, width, height }) => {
  let canvas = document.createElement('CANVAS')
  let ctx = canvas.getContext('2d')
  let img = new Image()
  img.crossOrigin = 'Anonymous'
  img.onload = function () {
    let ResWidth
    let ResHeight

    if (width && height) {
      ResWidth = width
      ResHeight = height
    } else if (width) {
      ResWidth = width
      ResHeight = img.height * (width / img.width)
    } else if (height) {
      ResHeight = height
      ResWidth = img.width * (height / img.height)
    } else {
      ResWidth = img.width
      ResHeight = img.height
    }
    canvas.width = ResWidth
    canvas.height = ResHeight
    console.log(ResWidth, ResHeight)
    ctx.drawImage(img, 0, 0, ResWidth, ResHeight)

    let saveA = document.createElement('a')
    document.body.appendChild(saveA)
    saveA.href = canvas.toDataURL('image/jpeg', 1)
    saveA.download = 'mypic' + new Date().getTime()
    saveA.target = '_blank'
    saveA.click()
    canvas = null
  }
  img.src = url
}

压缩图片指定可选指定分辨率和size大小

export const compressionImg = ({ file, width, height, size = 20, device = 6 }) => {
  if (file[0]) {
    return Promise.all(Array.from(file).map(e => compressionImg(e, size))) // 如果是 file 数组返回 Promise 数组
  } else {
    return new Promise(resolve => {
      const reader = new FileReader() // 创建 FileReader
      reader.onload = ({ target: { result: src } }) => {
        const fileSize = Number((file.size / 1024).toFixed(2))
        if (fileSize <= size) {
          resolve({
            file: file,
            origin: file,
            beforeSrc: src,
            afterSrc: src,
            beforeKB: fileSize + 'KB',
            afterKB: fileSize + 'KB',
            detail: [],
            quality: null
          })
        } else {
          const image = new Image() // 创建 img 元素
          image.onload = async () => {
            const canvas = document.createElement('canvas') // 创建 canvas 元素
            let ResWidth
            let ResHeight
            if (width && height) {
              ResWidth = width
              ResHeight = height
            } else if (width) {
              ResWidth = width
              ResHeight = image.height * (width / image.width)
            } else if (height) {
              ResHeight = height
              ResWidth = image.width * (height / image.height)
            } else {
              ResWidth = image.height
              ResHeight = image.width
            }
            canvas.width = ResWidth
            canvas.height = ResHeight
            canvas.getContext('2d').drawImage(image, 0, 0, ResWidth, ResHeight) // 绘制 canvas

            let canvasURL, miniFile
            let L = true
            let quality = 0
            const detail = []
            let start = Date.now()
            for (let i = 1; i <= device; i++) {
              canvasURL = canvas.toDataURL(
                'image/jpeg',
                L ? (quality += 1 / 2 ** i) : (quality -= 1 / 2 ** i)
              )
              const buffer = atob(canvasURL.split(',')[1])
              let length = buffer.length
              const bufferArray = new Uint8Array(new ArrayBuffer(length))
              while (length--) {
                bufferArray[length] = buffer.charCodeAt(length)
              }
              miniFile = new File([bufferArray], file.name, { type: 'image/jpeg' })
              miniFile.size / 1024 > size ? (L = false) : (L = true)
              detail.push({
                quality,
                size: miniFile.size,
                kb: Number((miniFile.size / 1024).toFixed(2)),
                time: Date.now() - start
              })
              start = Date.now()
            }
            resolve({
              detail,
              quality,
              file: miniFile,
              origin: file,
              beforeSrc: src,
              afterSrc: canvasURL,
              beforeKB: Number((file.size / 1024).toFixed(2)),
              afterKB: Number((miniFile.size / 1024).toFixed(2))
            })
          }
          image.src = src
        }
      }
      reader.readAsDataURL(file)
    })
  }
}

时间是否超过一天

export const setlocalTime = () => {
  var curTime = new Date().getTime();
  localStorage.setItem("timePeriodCache", JSON.stringify(curTime));
};

export const getlocalTime = () => {
  var data = localStorage.getItem("timePeriodCache");
  var dataObj = JSON.parse(data);
  console.log(new Date().getTime(), dataObj, new Date().getTime() - dataObj);
  // if (new Date().getTime() - dataObj > 31104000000) {
  if (new Date().getTime() - dataObj > 31104000000) {
    return true;
  } else {
    return false;
  }
};

对象中剔除数值等于空字符串的选项

// 
export const objectDeleStringNone = obj => {
  // 1. 去除空的
  return lodash.pickBy(obj, item => item);
};

根据秒转换 小时 ： 分钟 ： 秒

export const timeTransformation = val => {
  var h = Math.floor(val / 3600);
  var m = Math.floor((val / 60) % 60);
  var s = Math.floor(val % 60);
  h < 10 ? (h = `0${h}:`) : `${h}:`;
  m < 10 ? (m = `0${m}:`) : `${m}:`;
  s < 10 ? (s = `0${s}`) : `${s}`;
  if (h == "00:") {
    return m + s;
  } else {
    return h + m + s;
  }
};

检测当前浏览器类型

    CheckBrowser() {
        const explorer = navigator.userAgent;
		var Browser = null;
		if (!!window.ActiveXObject || "ActiveXObject" in window) {
		  Browser = 'ie';
		}
		if (window.document.documentMode) {
		  Browser = 'ie';
		}
		else if (explorer.indexOf("Firefox") >= 0) {
		  Browser = 'Firefox';
		}
		else if (explorer.indexOf("Edg") >= 0) {
			Browser = 'Edge';
		  }
		else if (explorer.indexOf("Chrome") >= 0) {
		  Browser = 'Chrome';
		}
		else if (explorer.indexOf("Opera") >= 0) {
		  Browser = 'Opera';
		}
		else if (explorer.indexOf("Safari") >= 0) {
		  Browser = 'Safari';
		}
		else if (explorer.indexOf("Netscape") >= 0) {
		  Browser = 'Netscape';
		}
        return Browser;
    }