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 相关文章推荐
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
Aug 13 Javascript
vue的一个分页组件的示例代码
Dec 25 Javascript
vue mounted 调用两次的完美解决办法
Oct 29 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
JS前端模块化原理与实现方法详解
Mar 17 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 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 preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
微信开发之获取JSAPI TICKET
2017/07/07 PHP
jquery中动态效果小结
2010/12/16 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
2013/12/17 Javascript
JS数组的赋值介绍
2014/03/10 Javascript
js函数调用的方式
2014/05/06 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
vue.js中实现登录控制的方法示例
2018/04/23 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[02:43]中国五虎出征TI3视频
2013/08/02 DOTA
打开电脑上的QQ的python代码
2013/02/10 Python
python中cPickle用法例子分享
2014/01/03 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
python通过zabbix api获取主机
2018/09/17 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
七年级音乐教学反思
2014/01/26 职场文书
书香校园活动方案
2014/02/28 职场文书
物理学专业求职信
2014/07/04 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
查看nginx配置文件路径和资源文件路径的方法
2021/03/31 Servers