Js 常用方法记录

记录以方便查找

base64转blob

const base64ToBlob = (data) => {
  const arr = data.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = window.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 })
}

base64 转 file

const base64ToFile = (data, filename) => {
  const arr = data.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  const suffixArr = mime.split('/')
  if (suffixArr.length && !filename) {
    const suffix = suffixArr[suffixArr.length - 1]
    filename =
      new Date().getTime() +
      '-' +
      Math.floor(Math.random() * 10000) +
      '.' +
      suffix
  }
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}

文件流转blob 链接

URL.createObjectURL(file)

文件流 转 base64

const blobFileTobase64 = (blobFile) => {
  const reader = new FileReader()
  reader.readAsDataURL(blobFile)
  return new Promise((resolve, reject) => {
    reader.onload = function () {
      resolve(this.result)
    }
    reader.onerror = (err) => {
      reject(err)
    }
  })
}

blob链接转 base64

const urlToBase64 = (url, type = 'image/png') => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = url
    img.onload = function () {
      const canvas = document.createElement('canvas')
      canvas.width = img.naturalWidth
      canvas.height = img.naturalHeight
      const ctx = canvas.getContext('2d')
      ctx?.drawImage(img, 0, 0)
      const result = canvas.toDataURL(type || 'image/png')
      resolve(result)
    }
    img.onerror = function (err) {
      reject(err)
    }
  })
}

利用canvas.toDataURL()

计时器

const formatSeconds = (value) => {
  //  秒
  let second = parseInt(value)
  //  分
  let minute = 0
  //  小时
  let hour = 0
  if (second > 60) {
    //  获取分钟，除以60取整数，得到整数分钟
    minute = parseInt(String(second / 60))
    //  获取秒数，秒数取佘，得到整数秒数
    second = parseInt(String(second % 60))
    //  如果分钟大于60，将分钟转换成小时
    if (minute > 60) {
      //  获取小时，获取分钟除以60，得到整数小时
      hour = parseInt(String(minute / 60))
      //  获取小时后取佘的分，获取分钟除以60取佘的分
      minute = parseInt(String(minute % 60))
    }
  }

  let result =
    second > 9 ? '' + parseInt(String(second)) : '0' + parseInt(String(second))
  result =
    minute > 0
      ? minute > 9
        ? '' + parseInt(String(minute)) + ':' + result
        : '0' + parseInt(String(minute)) + ':' + result
      : '00:' + result
  result =
    hour > 0
      ? hour > 9
        ? '' + parseInt(String(hour)) + ':' + result
        : '0' + parseInt(String(hour)) + ':' + result
      : '00:' + result

  return result
}

页面滚动到指定位置

let easeInOutCubic = (value) => {
    return value < 0.5 ? cubic(value * 2) / 2 : 1 - cubic((1 - value) * 2) / 2;
};
let cubic = (value) =>{
    return Math.pow(value, 3);
}
let scrollToTop = (num = 0) => {
    let _this = this;
    let el = document.documentElement;
    let beginTime = Date.now();
    let beginValue = el.scrollTop - num;
    let rAF = window.requestAnimationFrame || function (func) {
        return setTimeout(func, 16);
    };

    let frameFunc = function frameFunc() {
        let progress = (Date.now() - beginTime) / 500;
        if (progress < 1) {
            el.scrollTop = num + beginValue * (1 - easeInOutCubic(progress));
            rAF(frameFunc);
        } else {
            el.scrollTop = num;
        }
    };
    rAF(frameFunc);
};
scrollToTop(0)

vue自定义指令懒加载（IntersectionObserver）

directives:{
    imglazy: function(el, binding,vnode){
            // 有背景就不需要再监听了 vnode.context ==当前组件实例
        if(el.style.background) return
        const observer = new IntersectionObserver((dom)=>{
            for (let v of dom) {
                if(v.intersectionRatio > 0) {
                    // 需要判断下el类型是img标签还是div
                    el.style.background = `url('${xxx-url}') no-repeat center center / contain`
                    // el.src = 'xxx-url'
                    observer.disconnect()
                    //vnode.context.show = false
                }
            }
        },{root: null, rootMargin: '0px', threshold: 0.0})
        observer.observe(el)
    }
}

图片宽高等比例缩放处理

function imgScale(maxW, maxH, orgW, orgH) {
    if (orgW < maxW && orgH < maxH) {
        return { w: orgW, h: orgH }
    } else if (orgW > maxW && orgH > maxH) {
        // var sw = orgW / maxW, sh = orgH / maxH;
        var sw = orgW / orgH, sh = orgH / orgW;
        if (sw > sh) {
            return { w: maxW, h: maxH / sw };
        } else {
            return { w: maxW / sh, h: maxH };
        }
    } else if (orgW > maxW) {
        var sw = orgW / maxW;
        return { w: maxW, h: orgH / sw };
    } else {
        var sh = orgH / maxH;
        return { w: orgW/sh, h: maxH };
    }
}