1利用input元素获取

如果是input元素

var file=document.getElementById('myinput');

var fileData = file.files[0];

var size = fileData.size;   //注意,这里读到的是字节数

2如果不是input元素,是一般的IMG元素

先把图片转换成canvas,然后再转为base64码,通过获取base64.length来获取图片的大概尺寸。通过canvas转换后图片一般会变小一些,但是这个不能精准地获取图片大小,不推荐使用。

function compressImg(image, quality) {

var width = image.width;

var height = image.height;

var canvas = document.createElement("canvas");

var ctx = canvas.getContext('2d');

canvas.width = width;

canvas.height = height;

ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

var base64 = canvas.toDataURL('image/jpeg', quality);

return base64;

}

3 还有一种是通过后台传过来接口里面的图片信息获得

把图片传到服务器之后,从图片的文件流中读取去信息。然后返回给前端。

前端js获取图片大小 扩展名_前端获取图片存储大小的方法相关推荐

  1. 前端js获取图片大小 扩展名_前端 JS 获取 Image 图像 宽高 尺寸

    前端 JS 获取 Image 图像 宽高 尺寸 简介 项目中用到获取图片的原始尺寸,然后适配宽高:网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸. 在 ...

  2. 中获取文件名不要扩展名_如何批量修改文件名,3s时间够不够

    ?点击关注Excel表哥公众号 上一篇推文我们介绍了如何批量获取同一文件夹下所有的文件名. ▲点此图片回顾 很多读者获取到这些文件名之后的一种工作情形就是需要批量或者有针对性地修改这些文件的名称. 那 ...

  3. 前端js获取图片大小 扩展名_JS获取文件大小方法小结

    本文实例总结了JS获取文件大小方法.分享给大家供大家参考,具体如下: 方法一,利用ActiveX控件实现: function getFileSize(filePath) { var fso = new ...

  4. java 获取文件扩展名_如何在Java中获取文件扩展名

    java 获取文件扩展名 Sometimes while working with files, we need to process them differently based on their ...

  5. android 开发--获取文件的扩展名和去掉文件的扩展名

    /* * Java文件操作 获取文件扩展名 * */ public static String getExtensionName(String filename) { if ((filename != ...

  6. C# 获取文件名及扩展名

    C# 获取文件名及扩展名 string aFirstName = aFile.Substring(aFile.LastIndexOf("\\") + 1, (aFile.LastI ...

  7. 获取某一扩展名的文件集合

    /// 获取某一扩展名的文件集合         /// </summary>         /// <param name="dictoryName"> ...

  8. 前端js实现图片上传

    前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片 ...

  9. java 文件去除扩展名_Java操作——获取文件扩展名,去掉文件扩展名

    昨天收邮件,得知要参加一个产品部的会议,猜想,也许是因为我做的这个产品demo问题.于是昨天忙活到凌晨3点半,结果早上一来才知道又被调戏了.发邮件的MM把邮件误发给我了.悲催啊有木有,困啊有木有!自己 ...

最新文章

  1. Codeforces Round #672 (Div. 2)D. Rescue Nibel![扫描线解决区间问题]
  2. 阿里云飞天技术出海 eWTP落地马来西亚
  3. R 报错:package ‘***’ is not available (for R version ****) 的解决方案
  4. MaskedTextBox的聚焦和光标位置
  5. 如何修改CSDN博客的标题?
  6. Swift之深入解析访问控制权限
  7. kuangbin带我飞QAQ DLX之一脸懵逼
  8. getsockname函数与getpeername函数的使用
  9. while语法php格式,PHP While 循环
  10. Android Studio 安装 NDK(Mac OX)
  11. Python精通-Python局部变量与全局变量的区别
  12. 织梦后台对应的php文件,织梦DedeCMS后台文件列表按文件名排序的方法
  13. CSS 设置表格格式
  14. 信佑7linux下载,信佑2012
  15. 学python能做什么类型的工作-学Python Web开发框架到什么程度可以找到开发的工作?...
  16. 第三天 二列和三列布局
  17. MySQL数据库优化的八种方式(经典必看)
  18. 【龙讯module小课堂】“光”怪陆离:PWmat计算光学性质(一)
  19. 深入浅出的讲解傅里叶变换(真正的通俗易懂)
  20. 金融衍生品软件产品设计必备知识——上海黄金交易所产品概览

热门文章

  1. AMR NB格式解析
  2. Android Studio设置http proxy加速下载(亲测有效)
  3. TIKTOK视频:搬运视频技巧的这几点你知道吗?
  4. 视频搬运专业版-为搬运而生
  5. 有关汽车仪表的LED与LCD识别
  6. JS基础学习--第一周
  7. linux 下 gcc编译程序时,-I(大写i) 与-L(大写l)-l(小写l) 的作用
  8. 我的足迹(Appinventor练习)
  9. Tableau数据分析笔记-Chapter06填充地图、多维地图、混合地图
  10. 小米5S TWRP刷面具、EdXposed