js项目中常见util方法

获取video中的第一帧转化成图片

export const getVideoBase64 =  (url)=> {return new Promise(function (resolve, reject) {let dataURL = '';let video = document.createElement("video");video.setAttribute('crossOrigin', 'anonymous');//处理跨域video.setAttribute('src', url);video.setAttribute('width', 96);video.setAttribute('height', 54);video.setAttribute('preload', 'auto');video.setAttribute('autoplay', 'autoplay')video.addEventListener('loadeddata', function () {let canvas = document.createElement("canvas")let  width = video.width //canvas的尺寸和图片一样let  height = video.heightcanvas.width = width;canvas.height = height;canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvasdataURL = canvas.toDataURL('image/png'); //转换为base64resolve(dataURL);});  })
}

base64转file

export const dataURLtoFile = (dataurl, filename) => {// 获取到base64编码const arr = dataurl.split(',')// 将base64编码转为字符串const bstr = window.atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new File([u8arr], filename, {type: 'image/jpeg'})
}

文件流Blob转化成图片url

export const BlobToUrl = (bstr) => {const blob = new Blob([bstr], { type: 'image/jpeg' })return (window.URL || window.webkitURL).createObjectURL(blob)
}

图片url转base64

export const convertImgToBase64 = (url, callback, outputFormat) => {var canvas = document.createElement("CANVAS"),ctx = canvas.getContext("2d"),img = new Image();img.crossOrigin = "Anonymous";img.onload = function() {canvas.height = img.height;canvas.width = img.width;ctx.drawImage(img, 0, 0);var dataURL = canvas.toDataURL(outputFormat || "image/png");callback.call(this, dataURL);canvas = null;};img.src = url;
};

base64或url下载图片，可指定宽高，当只指定其中一个时候等比例缩放

// url下载图片
export const downLoadImgByA = ({ url, width, height }) => {let canvas = document.createElement('CANVAS')let ctx = canvas.getContext('2d')let img = new Image()img.crossOrigin = 'Anonymous'img.onload = function () {let ResWidthlet ResHeightif (width && height) {ResWidth = widthResHeight = height} else if (width) {ResWidth = widthResHeight = img.height * (width / img.width)} else if (height) {ResHeight = heightResWidth = img.width * (height / img.height)} else {ResWidth = img.widthResHeight = img.height}canvas.width = ResWidthcanvas.height = ResHeightconsole.log(ResWidth, ResHeight)ctx.drawImage(img, 0, 0, ResWidth, ResHeight)let saveA = document.createElement('a')document.body.appendChild(saveA)saveA.href = canvas.toDataURL('image/jpeg', 1)saveA.download = 'mypic' + new Date().getTime()saveA.target = '_blank'saveA.click()canvas = null}img.src = url
}

压缩图片指定可选指定分辨率和size大小

export const compressionImg = ({ file, width, height, size = 20, device = 6 }) => {if (file[0]) {return Promise.all(Array.from(file).map(e => compressionImg(e, size))) // 如果是 file 数组返回 Promise 数组} else {return new Promise(resolve => {const reader = new FileReader() // 创建 FileReaderreader.onload = ({ target: { result: src } }) => {const fileSize = Number((file.size / 1024).toFixed(2))if (fileSize <= size) {resolve({file: file,origin: file,beforeSrc: src,afterSrc: src,beforeKB: fileSize + 'KB',afterKB: fileSize + 'KB',detail: [],quality: null})} else {const image = new Image() // 创建 img 元素image.onload = async () => {const canvas = document.createElement('canvas') // 创建 canvas 元素let ResWidthlet ResHeightif (width && height) {ResWidth = widthResHeight = height} else if (width) {ResWidth = widthResHeight = image.height * (width / image.width)} else if (height) {ResHeight = heightResWidth = image.width * (height / image.height)} else {ResWidth = image.heightResHeight = image.width}canvas.width = ResWidthcanvas.height = ResHeightcanvas.getContext('2d').drawImage(image, 0, 0, ResWidth, ResHeight) // 绘制 canvaslet canvasURL, miniFilelet L = truelet quality = 0const detail = []let start = Date.now()for (let i = 1; i <= device; i++) {canvasURL = canvas.toDataURL('image/jpeg',L ? (quality += 1 / 2 ** i) : (quality -= 1 / 2 ** i))const buffer = atob(canvasURL.split(',')[1])let length = buffer.lengthconst bufferArray = new Uint8Array(new ArrayBuffer(length))while (length--) {bufferArray[length] = buffer.charCodeAt(length)}miniFile = new File([bufferArray], file.name, { type: 'image/jpeg' })miniFile.size / 1024 > size ? (L = false) : (L = true)detail.push({quality,size: miniFile.size,kb: Number((miniFile.size / 1024).toFixed(2)),time: Date.now() - start})start = Date.now()}resolve({detail,quality,file: miniFile,origin: file,beforeSrc: src,afterSrc: canvasURL,beforeKB: Number((file.size / 1024).toFixed(2)),afterKB: Number((miniFile.size / 1024).toFixed(2))})}image.src = src}}reader.readAsDataURL(file)})}
}

时间是否超过一天

export const setlocalTime = () => {var curTime = new Date().getTime();localStorage.setItem("timePeriodCache", JSON.stringify(curTime));
};export const getlocalTime = () => {var data = localStorage.getItem("timePeriodCache");var dataObj = JSON.parse(data);console.log(new Date().getTime(), dataObj, new Date().getTime() - dataObj);// if (new Date().getTime() - dataObj > 31104000000) {if (new Date().getTime() - dataObj > 31104000000) {return true;} else {return false;}
};

对象中剔除数值等于空字符串的选项

//
export const objectDeleStringNone = obj => {// 1. 去除空的return lodash.pickBy(obj, item => item);
};

根据秒转换小时：分钟：秒

export const timeTransformation = val => {var h = Math.floor(val / 3600);var m = Math.floor((val / 60) % 60);var s = Math.floor(val % 60);h < 10 ? (h = `0${h}:`) : `${h}:`;m < 10 ? (m = `0${m}:`) : `${m}:`;s < 10 ? (s = `0${s}`) : `${s}`;if (h == "00:") {return m + s;} else {return h + m + s;}
};

检测当前浏览器类型

CheckBrowser() {const explorer = navigator.userAgent;var Browser = null;if (!!window.ActiveXObject || "ActiveXObject" in window) {Browser = 'ie';}if (window.document.documentMode) {Browser = 'ie';}else if (explorer.indexOf("Firefox") >= 0) {Browser = 'Firefox';}else if (explorer.indexOf("Edg") >= 0) {Browser = 'Edge';}else if (explorer.indexOf("Chrome") >= 0) {Browser = 'Chrome';}else if (explorer.indexOf("Opera") >= 0) {Browser = 'Opera';}else if (explorer.indexOf("Safari") >= 0) {Browser = 'Safari';}else if (explorer.indexOf("Netscape") >= 0) {Browser = 'Netscape';}return Browser;}

js项目中常见util方法相关推荐

JS对象中常见的方法
本文主要介绍Native对象,即在ECMAScript标准中定义和描述,包括JavaScript内置对象(数组,日期对象等)和用户自定义的对象目录 1. 对象的创建并添加属性 1. new 对象 2 ...
js数组中常见的方法
在js里面有许多对数组进行处理的方法,下面介绍一下常用方法 push()方法,作用:在数组尾部添加入一个或多个数据,返回数组的新长度实例: <script>var arr = [1,2, ...
php util.js,javascript中一些util方法汇总_javascript技巧
/***************原生对象工类方法****************/ /** * 判断非空 * @param obj * @returns {boolean} */ function i ...
多个html如何套用套一个头部,Vue.js项目中管理每个页面的头部标签的两种方法...
在 Vue SPA 应用中,如果想要修改 HTML 的头部标签,如页面的 title ,我们只能去修改 index.html 模板文件,但是这个是全局的修改,如何为每个页面都设置不一样的 title ...
js 读取json文件_JavaScript 项目中常见配置文件介绍
原文地址:https://github.com/whinc/blog/issues/14 本文介绍一些前端项目的通用配置及相关资源,以便你了解项目中常见配置的含义以及配置方式. .gitignore ...
从实习经历中总结，项目中常见 Mock 方案
文章目录前言项目中常见 Mock 方案代码侵入拦截 Ajax 请求接口管理工具 Swagger YAPI RAP2-DELOS moco 总结 JSON Server 起飞教程安装启动服 ...
Vue.JS项目中二级路由下刷新浏览器仍呈现当前路由的实现方案
1.需求介绍: 以下介绍一下实现起来没什么疑问的需求:设备列表为一个主页,点击设备列表中的编辑按钮,进入设备信息主页面,默认打开设备配置页,点击设备状态.设备日志.固件升级,会切换下方内容. 本人对以 ...
Swiper4.5在vue项目中的使用方法
一. 效果图 · 渐变式 · gif 动画演示: 二.首先,npm 安装 swiper 用swiper,所以要先在框架内npm install --save swiper安装它. 安装完成之后,你会在 ...
vue.js项目中，关于element-ui完整引入、按需引入的介绍
element-ui引入方式,简单说来有两种:完整引入.按需引入首先谈一下npm安装element-ui的方法: cmd到项目目录,然后执行cmd命令:npm i element-ui -S稍等片刻 ...

js项目中常见util方法

获取video中的第一帧转化成图片

base64转file

文件流Blob转化成图片url

图片url转base64

base64或url下载图片，可指定宽高，当只指定其中一个时候等比例缩放

压缩图片指定可选指定分辨率和size大小

时间是否超过一天

对象中剔除数值等于空字符串的选项

根据秒转换小时：分钟：秒

检测当前浏览器类型

js项目中常见util方法相关推荐

最新文章

热门文章

js项目中常见util方法

获取video中的第一帧转化成图片

base64转file

文件流Blob转化成图片url

图片url转base64

base64或url下载图片，可指定宽高，当只指定其中一个时候等比例缩放

压缩图片指定可选指定分辨率和size大小

时间是否超过一天

对象中剔除数值等于空字符串的选项

根据秒转换 小时 ： 分钟 ： 秒

检测当前浏览器类型

js项目中常见util方法相关推荐

最新文章

热门文章

根据秒转换小时：分钟：秒