JavaScript 공통 도구 함수 요약(브라우저 환경)

프런트엔드 비즈니스에서 자주 사용하는 JavaScript 도구 함수로 브라우저 환경에서 자주 사용되며 프로젝트에서 직접 복사하여 사용할 수 있습니다.이곳은 통일적으로 정리하여 조회하기 편리하며 본 글은 지속적으로 갱신될 것이다.
1. file이 base64로 바뀝니다.

/**
 * file base64
 * @param {*} file file 
 * @param {*} callback 
 */
export const fileToDataURL = (file, callback) => {
 let freader = new FileReader();
 freader.readAsDataURL(file);
 freader.onload = function (e) { callback(e.target.result); }
}

2,blob 흐름이base64로 변환

/**
 * blob base64
 * @param {*} blob blob 
 * @param {*} callback 
 */
export const blobToDataURL = (blob, callback) => {
 let freader = new FileReader();
 freader.readAsDataURL(blob);
 freader.onload = function (e) { callback(e.target.result); }
}

3. base64가blob로 변환

/**
 * base64 blob
 * @param {*} dataurl base64
 */
export const dataURLtoBlob = (dataurl) => {
 let arr = dataurl.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 Blob([u8arr], { type: mime });
}

4, base64 는 file 로 변환되며 IE 저버전은 호환되지 않음

/**
 *  base64 file,IE 
 * @param {*} dataurl base64
 * @param {*} filename  
 */
export const dataURLtoFile = (dataurl, filename) => {
 let arr = dataurl.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 });
}

5. 그림 URL이base64로 변환

/**
 *  url base64
 * @param {*} url  url
 * @param {*} callback 
 * @param {*} outputFormat  
 */
export const imgUrlToDataURL = (url, callback, outputFormat) => {
  let canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    img = new Image;
  img.crossOrigin = 'Anonymous';
  img.src = url + "?timeStamp=" + new Date().getTime();
  img.onload = function () {
    canvas.height = img.height;
    canvas.width = img.width;
    // ctx.drawImage(img, 0, 0);
    ctx.drawImage(this, 0, 0, img.width, img.height);
    let dataURL = canvas.toDataURL(outputFormat || 'image/png');
    // callback.call(this, dataURL);
    callback && callback(dataURL)
    canvas = null;
  };
}

6. 창 크기 가져오기

export function getViewportSize() {
 let w = 0;
 let h = 0;
 if (window.innerWidth) {
  w = window.innerWidth
  h = window.innerHeight
 } else if (document.body && document.body.clientWidth) {
  w = document.body.clientWidth
  h = document.body.clientHeight
 } else if (document.documentElement && document.documentElement.clientWidth) {
  w = document.documentElement.clientWidth
  h = document.documentElement.clientHeight
 }
 return { w, h }
}

7. 브라우저 환경 검사

const ua = window.navigator.userAgent.toLowerCase()

//  
export const isWx = () => ua.match(/MicroMessenger/i) == 'micromessenger'

//  ipad
export const isIpad = () => ua.indexOf('ipad') > -1

//  iphone
export const isIphone = () => ua.indexOf('iphone os') > -1

//  uc
export const isUc = () => ua.indexOf('ucweb') > -1

//  windows pc
export const isWindows = () => ua.indexOf('windows') > -1

//  android
export const isAndroid = () => ua.indexOf('android') > -1 || ua.indexOf('adr') > -1

//  ios
export const isIos = () => /(iphone|ipod|ipad|ios)/i.test(ua)

//  qq 
export const isQq = () => ua.indexOf('mqqbrowser') > -1 && ua.indexOf(' qq') < 0

//  qq 
export const isQQInstalled = () => ua.indexOf(' qq') > -1 && ua.indexOf('mqqbrowser') < 0

8. 전체 화면 열기 및 닫기

//  
export function launchFullscreen(element) {
 element = element || document.documentElement
 if (element.requestFullscreen) {
  element.requestFullscreen()
 } else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen()
 } else if (element.msRequestFullscreen) {
  element.msRequestFullscreen()
 } else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullScreen()
 }
}

//  
export function exitFullscreen() {
 if (document.exitFullscreen) {
  document.exitFullscreen()
 } else if (document.msExitFullscreen) {
  document.msExitFullscreen()
 } else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen()
 } else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen()
 }
}

9. 화면 스크롤 애니메이션을 위한 위쪽/위치 지정

/**
 * @param {*} number  
 * @param {*} time    ms
 */
const scrolling = (number = 0, time) => {
  if (!time) {
    document.body.scrollTop = document.documentElement.scrollTop = number;
    return number;
  }
  //    
  const spacingTime = 20;
  //  
  let spacingInex = time / spacingTime; 
  //  
  let nowTop = document.body.scrollTop + document.documentElement.scrollTop; 
  //  
  let everTop = (number - nowTop) / spacingInex;

  let scrollTimer = setInterval(() => {
    if (spacingInex > 0) {
      spacingInex--;
      ScrollTop(nowTop += everTop);
    } else {
      clearInterval(scrollTimer); //  
    }
  }, spacingTime);
};

//  500px   300ms
// scrolling(500, 300);

10. 닻점 스크롤 실현

//  H5 scrollIntoView ， ，IE 8 、Safari 6 、Safari on iOS 5 
const scrollToAnchor = (anchorName) => {
  if (anchorName) {
    //  
    let anchorElement = document.getElementById(anchorName);
    //  id ， 
    if (anchorElement) {
      anchorElement.scrollIntoView({
        behavior: 'auto', //  ， "auto"  "smooth"  。  "auto"
        block: 'start', //  ， "start", "center", "end",   "nearest" 。  "start"
        inline: 'nearest', //  ， "start", "center", "end",   "nearest" 。  "nearest"
      });
    }
  }
}

다음은 JavaScript 상용 도구 함수 요약(브라우저 환경)의 상세한 내용입니다. JavaScript 도구 함수에 대한 더 많은 자료는 다른 관련 글을 참고하세요!