JavaScript常用工具函数汇总（浏览器环境）
前端业务中比较常用的JavaScript工具函数，浏览器环境常用，可直接拷贝在项目里使用。这里统一整理，方便查阅，本文章会持续更新。
一、file转为base64
/**
*file转为base64
*@param{*}filefile对象
*@param{*}callback
*/
exportconstfileToDataURL=(file,callback)=>{
letfreader=newFileReader();
freader.readAsDataURL(file);
freader.onload=function(e){callback(e.target.result);}
}
二、blob流转换为base64
/**
*blob流转换为base64
*@param{*}blobblob对象
*@param{*}callback
*/
exportconstblobToDataURL=(blob,callback)=>{
letfreader=newFileReader();
freader.readAsDataURL(blob);
freader.onload=function(e){callback(e.target.result);}
}
三、base64转换为blob
/**
*base64转换为blob
*@param{*}dataurlbase64
*/
exportconstdataURLtoBlob=(dataurl)=>{
letarr=dataurl.split(','),
mime=arr[0].match(/:(.*?);/)[1],
bstr=atob(arr[1]),
n=bstr.length,
u8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewBlob([u8arr],{type:mime});
}
四、base64转换为file,IE低版本不兼容
/**
*将base64转换为file,IE低版本不兼容
*@param{*}dataurlbase64
*@param{*}filename文件名
*/
exportconstdataURLtoFile=(dataurl,filename)=>{
letarr=dataurl.split(','),
mime=arr[0].match(/:(.*?);/)[1],
bstr=atob(arr[1]),
n=bstr.length,
u8arr=newUint8Array(n);
while(n--){
u8arr[n]=bstr.charCodeAt(n);
}
returnnewFile([u8arr],filename,{type:mime});
}
五、图片url转化成base64
/**
*图片url转化成base64
*@param{*}url图片url
*@param{*}callback
*@param{*}outputFormat图片格式
*/
exportconstimgUrlToDataURL=(url,callback,outputFormat)=>{
letcanvas=document.createElement('canvas'),
ctx=canvas.getContext('2d'),
img=newImage;
img.crossOrigin='Anonymous';
img.src=url+"?timeStamp="+newDate().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);
letdataURL=canvas.toDataURL(outputFormat||'image/png');
//callback.call(this,dataURL);
callback&&callback(dataURL)
canvas=null;
};
}
六、获取窗口尺寸
exportfunctiongetViewportSize(){
letw=0;
leth=0;
if(window.innerWidth){
w=window.innerWidth
h=window.innerHeight
}elseif(document.body&&document.body.clientWidth){
w=document.body.clientWidth
h=document.body.clientHeight
}elseif(document.documentElement&&document.documentElement.clientWidth){
w=document.documentElement.clientWidth
h=document.documentElement.clientHeight
}
return{w,h}
}
七、浏览器环境检测
constua=window.navigator.userAgent.toLowerCase()
//是否微信
exportconstisWx=()=>ua.match(/MicroMessenger/i)=='micromessenger'
//是否ipad
exportconstisIpad=()=>ua.indexOf('ipad')>-1
//是否iphone
exportconstisIphone=()=>ua.indexOf('iphoneos')>-1
//是否uc
exportconstisUc=()=>ua.indexOf('ucweb')>-1
//是否windowspc
exportconstisWindows=()=>ua.indexOf('windows')>-1
//是否android
exportconstisAndroid=()=>ua.indexOf('android')>-1||ua.indexOf('adr')>-1
//是否ios
exportconstisIos=()=>/(iphone|ipod|ipad|ios)/i.test(ua)
//是否qq浏览器
exportconstisQq=()=>ua.indexOf('mqqbrowser')>-1&&ua.indexOf('qq')<0
//是否qq内置浏览器
exportconstisQQInstalled=()=>ua.indexOf('qq')>-1&&ua.indexOf('mqqbrowser')<0
八、开启与关闭全屏
//开启全屏
exportfunctionlaunchFullscreen(element){
element=element||document.documentElement
if(element.requestFullscreen){
element.requestFullscreen()
}elseif(element.mozRequestFullScreen){
element.mozRequestFullScreen()
}elseif(element.msRequestFullscreen){
element.msRequestFullscreen()
}elseif(element.webkitRequestFullscreen){
element.webkitRequestFullScreen()
}
}
//关闭全屏
exportfunctionexitFullscreen(){
if(document.exitFullscreen){
document.exitFullscreen()
}elseif(document.msExitFullscreen){
document.msExitFullscreen()
}elseif(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}elseif(document.webkitExitFullscreen){
document.webkitExitFullscreen()
}
}
九、返回顶部/指定位置，实现滚动动画
/**
*@param{*}number距离页面顶部的距离
*@param{*}time滚动所需时间单位ms
*/
constscrolling=(number=0,time)=>{
if(!time){
document.body.scrollTop=document.documentElement.scrollTop=number;
returnnumber;
}
//设置循环的间隔时间值越小消耗性能越高
constspacingTime=20;
//计算循环的次数
letspacingInex=time/spacingTime;
//获取当前滚动条位置
letnowTop=document.body.scrollTop+document.documentElement.scrollTop;
//计算每次滑动的距离
leteverTop=(number-nowTop)/spacingInex;
letscrollTimer=setInterval(()=>{
if(spacingInex>0){
spacingInex--;
ScrollTop(nowTop+=everTop);
}else{
clearInterval(scrollTimer);//清除计时器
}
},spacingTime);
};
//滚动到距离页面顶部500px的位置动画时间为300ms
//scrolling(500,300);
十、实现锚点滚动
//运用了H5的scrollIntoView方法，这是一个实验中的功能，IE8以下、Safari6以下、SafarioniOS5以下不兼容
constscrollToAnchor=(anchorName)=>{
if(anchorName){
//找到锚点
letanchorElement=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工具函数的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。