JavaScript常用工具函数汇总(浏览器环境)


Posted in Javascript onSeptember 17, 2020

前端业务中比较常用的JavaScript工具函数,浏览器环境常用,可直接拷贝在项目里使用。这里统一整理,方便查阅,本文章会持续更新。

一、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); }
}

二、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); }
}

三、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 });
}

四、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 });
}

五、图片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;
  };
}

六、获取窗口尺寸

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 }
}

七、浏览器环境检测

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

八、开启与关闭全屏

// 开启全屏
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()
 }
}

九、返回顶部/指定位置,实现滚动动画

/**
 * @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);

十、实现锚点滚动

// 运用了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 工具函数的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js语法学习之判断一个对象是否为数组
May 13 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
纯javascript实现分页(两种方法)
Aug 26 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
浅谈pc端rem字体设置的问题
Aug 03 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 Javascript
Vue使用watch监听一个对象中的属性的实现方法
May 10 Javascript
详解Vue 如何监听Array的变化
Jun 06 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
koa2 从入门到精通(小结)
Jul 23 Javascript
JavaScript中如何调用Java方法
Sep 16 #Javascript
Vue封装全局过滤器Filters的步骤
Sep 16 #Javascript
Vue父子组件传值的一些坑
Sep 16 #Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 #Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
Sep 16 #Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 #Javascript
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 #Javascript
You might like
PHP的5个安全措施小结
2012/07/17 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
基于Laravel5.4实现多字段登录功能方法示例
2017/08/11 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
微信小程序实现传参数的几种方法示例
2018/01/10 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Pyqt5实现英文学习词典
2019/06/24 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
python判断变量是否为列表的方法
2020/09/17 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
中专生学习生活的自我评价分享
2013/10/27 职场文书
上班睡觉检讨书
2014/01/09 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
取保候审保证书
2014/04/30 职场文书
小学体育教学随笔
2015/08/14 职场文书
超市店长竞聘书
2015/09/15 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
浅谈JavaScript作用域
2021/12/06 Javascript