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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
JavaScript对象学习小结
Sep 02 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
javascript断点调试心得分享
Apr 23 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
Feb 05 Javascript
jquery实现聊天机器人
Feb 08 jQuery
javaScript Array api梳理
Mar 31 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 function用法如何递归及return和echo区别
2014/03/07 PHP
PHP身份证校验码计算方法
2016/08/10 PHP
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
2015/10/23 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
layui select动态添加option的实例
2018/03/07 Javascript
JQuery元素快速查找与操作
2018/04/22 jQuery
详解node Async/Await 更好的异步编程解决方案
2018/05/10 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python中pip的安装与使用教程
2018/08/10 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
解决Mac下使用python的坑
2019/08/13 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Python直接赋值及深浅拷贝原理详解
2020/09/05 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
法律顾问服务方案
2014/05/15 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
出租车拒载检讨书
2015/01/28 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
离职证明格式样本
2015/06/12 职场文书
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL