前端js获取图片大小 扩展名_前端 JS 获取 Image 图像 宽高 尺寸
前端 JS 获取 Image 图像 宽高 尺寸
简介
项目中用到获取图片的原始尺寸,然后适配宽高;网上的大部分前端解决方案,都是new Image()后,在onload事件中获取image的尺寸。
在图片数量较多的时候,这样的获取效率实在是低下。所有就有了这篇文章。通过直接读取解析文件的字节码来获取图片的尺寸。
IMAGE_HEAD_SIGS
var IMAGE_HEAD_SIGS = {
GIF: [0x47, 0x49, 0x46], //'G' 'I' 'F' ascii
PNG: [0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a],
JPG: [0xff, 0xd8, 0xff, 0xe0],
BMP: [0x42, 0x4d]
}
PNG
function ReadPNG(bytes) {
if (bytes.slice(0, 8).toString() === IMAGE_HEAD_SIGS.PNG.toString()) {
let width = readUint32BE(bytes, 16);
let height = readUint32BE(bytes, 20);
return { width, height }
}
}
JPG
function ReadJPG(bytes) {
if (bytes.slice(0, 4).toString() === IMAGE_HEAD_SIGS.JPG.toString()) {
const M_SOF0 = 0xC0; /* Start Of Frame N */
const M_SOF1 = 0xC1; /* N indicates which compression process */
const M_SOF2 = 0xC2; /* Only SOF0-SOF2 are now in common use */
const M_SOF3 = 0xC3;
const M_SOF5 = 0xC5; /* NB: codes C4 and CC are NOT SOF markers */
const M_SOF6 = 0xC6;
const M_SOF7 = 0xC7;
const M_SOF9 = 0xC9;
const M_SOF10 = 0xCA;
const M_SOF11 = 0xCB;
const M_SOF13 = 0xCD;
const M_SOF14 = 0xCE;
const M_SOF15 = 0xCF;
for (let i = 0; i < bytes.length; i++) {
if (bytes[i] === 0xFF) {
switch (bytes[i + 1]) {
case M_SOF0:
case M_SOF1:
case M_SOF2:
case M_SOF3:
case M_SOF5:
case M_SOF6:
case M_SOF7:
case M_SOF9:
case M_SOF10:
case M_SOF11:
case M_SOF13:
case M_SOF14:
case M_SOF15:
{
//高在前,宽在后。
let width = readUint16BE(bytes, i + 7)
let height = readUint16BE(bytes, i + 5)
return { width, height }
}
default:
break;
}
}
}
}
}
GIF
function ReadGIF(bytes) {
if (bytes.slice(0, 3).toString() === IMAGE_HEAD_SIGS.GIF.toString()) {
let width = readUint16LE(bytes, 6);
let height = readUint16LE(bytes, 8);
return { width, height }
}
}
BMP
function ReadBMP(bytes) {
if (bytes.slice(0, 2).toString() === IMAGE_HEAD_SIGS.BMP.toString()) {
//虽然格式为4字节,这里只取2字节,确保height为正数。为负数时,图像为倒置图像。
let height = readUint16LE(bytes, 22);
let width = readUint16LE(bytes, 18);
return { width, height }
}
}
NPM
npm i image-dimensionj
前端js获取图片大小 扩展名_前端 JS 获取 Image 图像 宽高 尺寸相关推荐
- 前端js获取图片大小 扩展名_前端获取图片存储大小的方法
1利用input元素获取 如果是input元素 var file=document.getElementById('myinput'); var fileData = file.files[0]; v ...
- 前端js获取图片大小 扩展名_JS获取文件大小方法小结
本文实例总结了JS获取文件大小方法.分享给大家供大家参考,具体如下: 方法一,利用ActiveX控件实现: function getFileSize(filePath) { var fso = new ...
- 中获取文件名不要扩展名_如何批量修改文件名,3s时间够不够
?点击关注Excel表哥公众号 上一篇推文我们介绍了如何批量获取同一文件夹下所有的文件名. ▲点此图片回顾 很多读者获取到这些文件名之后的一种工作情形就是需要批量或者有针对性地修改这些文件的名称. 那 ...
- php 获得图片大小,js获取图片大小_php 或js获取图片大小
摘要 腾兴网为您分享:php 或js获取图片大小,之了课堂,云集,宜信,学堂在线等软件知识,以及手机东方财富通,航空证券软件,日历星座,大吉大利晚上吃鸡图片,一米鲜,熊猫云,sketchup动画,空文 ...
- java 获取文件扩展名_如何在Java中获取文件扩展名
java 获取文件扩展名 Sometimes while working with files, we need to process them differently based on their ...
- android 开发--获取文件的扩展名和去掉文件的扩展名
/* * Java文件操作 获取文件扩展名 * */ public static String getExtensionName(String filename) { if ((filename != ...
- C# 获取文件名及扩展名
C# 获取文件名及扩展名 string aFirstName = aFile.Substring(aFile.LastIndexOf("\\") + 1, (aFile.LastI ...
- 获取某一扩展名的文件集合
/// 获取某一扩展名的文件集合 /// </summary> /// <param name="dictoryName"> ...
- QImage、QImageReader Qt获取图片大小
获取图片大小:这种情况下,如果图片实际 高>宽,会把高作为图片的宽来处理,与实际情况不符合. QImage img(filename);img.size(); 获取图片大小,这种情况可以获取到图 ...
最新文章
- VMware 虚拟化编程(3) —VMware vSphere Web Service API 解析
- Win7下安装ubuntu (双硬盘用户加强版)
- PPT快捷键大全(作分析报告的人有福了)
- 《spring-boot学习》-03-入门
- 如何检查Django版本
- 锐收计算机编码,大众电脑编码大全
- 司法官论托普的“倒掉” (转,深刻揭示软件公司经营之路)
- 【最优化基础】惩罚和障碍函数
- 方维团购V3.07版本短信接口开发
- 谢霆锋张柏芝被曝婚变 范范微博擦泪为好友祷告
- Minimum supported Gradle version is 4.10.1. Current version is 4.6.
- elasticsearch api 调用
- JAVA代码托管平台_推荐几个常用的代码托管平台
- php添加背景图及设置格式,PHP添加PNG图片背景透明水印操作类定义与用法示例
- 统计英文字数c语言,c语言题目,纯英文字数统计,怎么错了?
- MT6752/MT6755处理器功能介绍,MT6752/MT6755芯片资料分享
- python输出平行四边
- DHL快递已订购12架!全电动飞机Alice首飞成功;浙江嘉兴首家氧吧酒店开业 | 美通企业日报...
- idea中安装统计代码statistic插件
- ant java macrodef_Ant之 ZipException And Taskdef And MacroDef——“宏”
热门文章
- 01-Flutter移动电商实战-项目学习记录
- Android中WebService的应用
- C语言1094题目,P1094 (C语言代码)
- constraintlayout布局新特性_AMD发布Ryzen PRO 4000系列移动处理器:多了超线程和商用安全特性...
- 计算机在社区健康档案管理中的作用,某社区卫生中心对辖区居民的健康档案信息进行电子化。一直建档居民的年龄范围在1..._考试资料网...
- SpringBoot配置文件绑定到Java Bean
- 转账为demo,spring事务
- Linux下安装和配置solr/tomcat/IK分词器 详细实例一.
- docker 查询或获取私有仓库(registry)中的镜像
- TCP三次握手(待细研究)