js获取图片和视频的宽高等

获取图片和视频的宽高

日常开发中，在提交给后端视频和图片等文件之前，需要控制文件的的宽高，大小等。

图片

// 上传文件的方法
uploadFile(e) {let that = this// 该file中可以获取到文件名，大小等信息let file = e.target.files[0]let img = new Image()let reader = new FileReader()// 通过此方法可以让图片显示reader.readAsDataURL(file)reader.onload = function() {img.src = this.result·`}·// 加载完成执行img.onload = function() {console.log(img.width, img.height)}},

下图为测试图片的信息

视频

uploadFile(e) {// 该file中可以获取到文件名，大小等信息let file = e.target.files[0]let video = document.createElement('video')video.preload = 'metadata'video.src = URL.createObjectURL(file)video.onloadedmetadata = () => {window.URL.revokeObjectURL(video.src)console.log(video.videoWidth, video.videoHeight)}
}

对视频也有时长等属性，下面做个封装

/*** @param file 文件流* 格式如: {*  lastModified: 1565170652842*  lastModifiedDate: Wed Aug 07 2019 17:37:32 GMT+0800 (中国标准时间) {}*  name: "Dunhuang Y [Full HD 1080p].mp4"*  size: 35935847*  type: "video/mp4"*  webkitRelativePath: ""* 适配信息* @param fileNum 想要返回的视频大小 {1: "KB", 2: "MB", 3: "GB", 4: "TB"}* @return Object  {duration, fileSize, type, width, height}* }*/
class CalcVideo {constructor(file, fileNum) {this.video = document.createElement('video')this.video.preload = 'metadata'this.video.src = URL.createObjectURL(file)return this.init(file, fileNum)}init(file, fileNum) {return new Promise(resolve => {let fileSize = this.fileLengthFormat(file.size, fileNum)// 文件类型限制let type = this.getFileType(file.name)if (type === 'mp4') {// 时长this.video.onloadedmetadata = () => {window.URL.revokeObjectURL(this.video.src)var duration = this.video.durationresolve({fileSize,duration,type,height: this.video.videoHeight,width: this.video.videoWidth,})}} else {resolve({fileSize,duration: 0,type,height: this.video.videoHeight,width: this.video.videoWidth,})}})}getFileType(fileName) {var exts = fileName.split('.')var ext = ''if (exts != undefined) {if (exts.length <= 1 && fileName.indexOf('=') > -1) {//直接输入上传到azure之后生成的文件地址console.log('输入是文件地址：', exts)return false} else {ext = exts[exts.length - 1]ext = ext.toLowerCase()return ext}} else {return false}}/*** [fileLengthFormat 格式化文件大小]* @param  {[int]} total [文件大小] Byte* @param  {[int]} n {1: "KB", 2: "MB", 3: "GB", 4: "TB"}* @return {[string]}       [带单位的文件大小的字符串]*/fileLengthFormat(total, n) {var formatvar len = total / 1024.0if (len > 1000) {return this.fileLengthFormat(len, ++n)} else {switch (n) {case 1:format = len.toFixed(2)breakcase 2:format = len.toFixed(2)breakcase 3:format = len.toFixed(2)breakcase 4:format = len.toFixed(2)break}return +format}}
}export default CalcVideo

如何使用

// 引入文件
import CalcVideo from '../../../utils/calcVideo'
// 上传文件的方法
uploadFile() {let file = e.target.files[0]let video = new CalcVideo(file, 2)video.then(res => {const { height, width } = res})
}

js获取图片和视频的宽高等相关推荐

js 获取上传图片和视频的宽高，还有视频的时长
场景: 当产品经理告诉你说:我们需要限制上传的图片或视频的尺寸,不符合要求不允许上传,这个时候你该怎么做? 不用多想,很明显我们需要想办法拿到图片或视频的宽度,然后和预期的尺寸进行对比过滤,就能轻易实 ...
php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
android获取图片缩略图,Android系获取图片和视频的缩略图
获取手机里视频缩略图: public static Bitmap getVideoThumbnail(ContentResolver cr,Uri uri) { Bitmap bitmap = nul ...
android 查询所有图片和视频,Android系统详解之获取图片和视频的缩略图
从Android 2.2开始系统新增了一个缩略图ThumbnailUtils类,位于framework的android.media.ThumbnailUtils位置,可以帮助我们从mediaprovi ...
php 获得图片大小,js获取图片大小_php 或js获取图片大小
摘要腾兴网为您分享:php 或js获取图片大小,之了课堂,云集,宜信,学堂在线等软件知识,以及手机东方财富通,航空证券软件,日历星座,大吉大利晚上吃鸡图片,一米鲜,熊猫云,sketchup动画,空文 ...
js 获取图片url的Blob值并预览
js 获取图片url的Blob值并预览 1)使用 XMLHttpRequest 对象获取图片url的Blob值参考:https://www.cnblogs.com/tujia/p/6483255.h ...
js获取图片真实尺寸 - 代码篇
js获取图片真实尺寸 - 代码篇代码案例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...
js获取图片点坐标值
js获取图片点坐标值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
js点击获取—通过JS获取图片的相对坐标位置
一.通过JS获取鼠标点击时图片的相对坐标位置源代码如下所示: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <h ...

js获取图片和视频的宽高等

获取图片和视频的宽高

js获取图片和视频的宽高等相关推荐

最新文章

热门文章