前端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

L3Byb3h5L2h0dHAvaW1hZ2UubWFtaWNvZGUuY29tL2luZm8vMjAxOTExLzIwMTkxMTAyMTIxNzEwNDgwOTgxLmpwZw==.jpg

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

L3Byb3h5L2h0dHAvaW1hZ2UubWFtaWNvZGUuY29tL2luZm8vMjAxOTExLzIwMTkxMTAyMTIxNzEwNTMzNzE3LmpwZw==.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

L3Byb3h5L2h0dHAvaW1hZ2UubWFtaWNvZGUuY29tL2luZm8vMjAxOTExLzIwMTkxMTAyMTIxNzEwNTcyNzgxLmpwZw==.jpg

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

L3Byb3h5L2h0dHAvaW1hZ2UubWFtaWNvZGUuY29tL2luZm8vMjAxOTExLzIwMTkxMTAyMTIxNzEwNjA5ODkyLmpwZw==.jpg

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430647.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

InnoDB还是MyISAM?

两种类型最主要的差别就是Innodb 支持事务处理与外键和行级锁.而MyISAM不支持.所以MyISAM往往就容易被人认为只适合在小项目中使用。 我作为使用MySQL的用户角度出发&#xff0c;Innodb和MyISAM都是比较喜欢的&#xff0c;但是从我目前运维的数据库平台要达到需求&#xff1a;9…

mysql linux 安装_mysql-5.7.28 在Linux下的安装教程图解

2.上传tar包到服务器到 /usr/local/src3.卸载系统自动的Mariadb rpm -qa | grep mariadb rpm -e --nodeps mariadb-libs-5.5.60-1.el7_5.x86_644.检查是否有mysql存在rpm -qa|grep -i mysql5.查询是否还有mysql的目录find / -name mysql6.解压&#xff1a;tar -zxvf7.修改名称&…

有关软件工程的问题的分析和讨论及课后的作业3

个人电脑界面的演变。 1973年四月第一次操作是在施乐PARC Alto计算机完成。 该系统是第一个将现代图形用户界面中的所有元素结合起来的系统。 1981年6月施乐介绍了星&#xff0c;商业阿尔托的继任者。 显著特点&#xff1a;双点击图标&#xff0c;重叠窗口&#xff0c;对话框和…

mysql语句中模糊查询_关于sql、mysql语句的模糊查询分类与详解,包括基本用法和mapper.xml文件里插入写法...

欢迎猿类加qq:2318645572,共同学习进步实际例子&#xff1a;ssm框架:service业务层->dao层->mappers.xml->junit/test测试1:service业务层(package)Resourceprivate BooksDao bookDao;public List> Service(String serachtitle, String serachtype) {Map paramnew …

GOF设计模式之1:单例设计模式

1.单例设计模式核心作用&#xff1a; 保证一个类只有一个实例&#xff0c;并且提供了访问该实例的全局访问点 2.常见应用场景&#xff1a; window的任务管理器项目中读取配置文件一般也是一个单例模式数据库连接池的设计也是采用单例模式&#xff0c;因为数据库连接是一种数据库…

php 管理 mysql 数据库 代码_PHP5对Mysql5的任意数据库表的管理代码示例(三)

续&#xff1a;点击编辑一个条目会跳转至edit.php//edit.phpEditing an entry from the databaseEdit an entry$database "sunsite";$tablename $_REQUEST[tablename];echo "Data from $tablename";MySQL_connect("localhost","root"…

封装EF code first用存储过程的分页方法

一年半没有做过MVC的项目了&#xff0c;还是很怀念&#xff08;因为现在项目还是原来的ASPX&#xff09;&#xff0c;个人还是喜欢mvc&#xff0c;最近又开始重拾MVC&#xff0c;感觉既熟悉又陌生。 记录一下封装好的分页代码 首先先说下 我使用EF codefirst的目的. 是因为可以…

apache httpd mysql_Centos7安装配置Apache(httpd)+php+mysql+phpMyAdmin

一、安装mysql执行命令&#xff1a;rpm -ivh mysql-community-release-el7-5.noarch.rpm执行 yum -y install mysql mysql-server mysql-devel&#xff0c;安装成功。再次使用该命令&#xff0c;然后得到以下信息打开mysql服务 &#xff1a;service mysqld start进入mysql客户端…

如何:创建公钥/私钥对

要使用强名称为程序集签名&#xff0c;必须具有公钥/私钥对。 这一对加密公钥和加密私钥用于在编译过程中创建强名称程序集。 您可以使用强名称工具 (Sn.exe) 来创建密钥对。 密钥对文件通常具有 .snk 扩展名。 注意 在 Visual Studio 中&#xff0c;C# 和 Visual Basic 项…

用户设置及用户默认设置

1、创建 其中&#xff0c;Root.plist中为设置 2、读取应用中的设置 3、在应用中修改默认设置 4、注册默认值 5、保证设置有效&#xff08;我们注册所有控制器&#xff0c;以便接收从暂停执行状态唤醒的应用发送出来的通知&#xff09; 每个控制器都订阅我们关注的通知。 6、撤销…

activemq jdbc mysql_activeMQ JDBC Master Slave

ActiveMQ集群应用2\ ActiveMQ JDBC 主从集群3\ 解决单点故障&#xff1a;JDBC Master Slave本人应用的为集群方案中的一种&#xff0c; JDBC Master Slave &#xff0c;说明及好处就看如上外链文章了&#xff0c;上正题&#xff0c;方案如何实施及程序如何调用&#xff11;&…

AsyncTask知识整理笔记

Android的AsyncTask比Handler更轻量级一些&#xff0c;适用于简单的异步处理。&#xff08;但是&#xff0c;要注意&#xff01;&#xff01;&#xff01;&#xff01;使用更轻量级&#xff0c;实际执行却反之&#xff0c;因为AsyncTask里封装了Handler&#xff0c;本质也是使用…

mysql sql语句 入门_mysql(3)mysql的sql语句入门

1.登录mysql与退出mysql登录&#xff1a;mysql -u账号 -p密码 -h主机地址 -P端口号 -e 执行的sql语句&#xff1b; //密码一般不直接写出&#xff0c;回车后隐藏写入 &#xff0c;-h可以不写默认是localhost退出&#xff1a;quit&#xff0c;exit &#xff0c;ctrlc备注&…

orcale 基本查询(1)

orcale 基本查询      查询当前用户下的所有表&#xff1a;     select * from tab;      查询表结构&#xff1a;   desc 表名设置行宽&#xff1a;    set linesize 120;设置列宽&#xff1a;    数值类型&#xff1a;      col 列名 for…

优秀的Android资源

今天&#xff0c;收藏了一下“优秀的Android资源”&#xff0c;以后有时间也学习学习。 一、开发工具 开发android第一步就是安装开发工具SDK&#xff0c;国内有一些机构和公司对些作了境像&#xff0c;这个网站作了详细统计列表&#xff1a;http://www.androiddevtools.cn/&am…

mysql视图表修复_mysql中含有视图数据库在恢复数据时视图变成数据表的解决方法...

# version: 1.0 for linux# method: 全备份mysql数据# author: fengzhanhai# history: create program V1.0 20121101 by fengzhanhai# tasks: * 1 * * * /home/db-backup/mysql/mysqlbk.sh >> /dev/null 2>&1#conf---------UserNamesdmtvm…

LeetCode OJ 160. Intersection of Two Linked Lists

Write a program to find the node at which the intersection of two singly linked lists begins. For example, the following two linked lists: A: a1 → a2↘c1 → c2 → c3↗ B: b1 → b2 → b3begin to intersect at node c1. Notes: If the …

监控mysql业务数据分析_MySQL数据库监控指标之执行性能总结

查询性能MySQL 用户监控查询延迟的方式有很多&#xff0c;既可以通过 MySQL 内置的指标&#xff0c;也可以通过查询性能模式。从 MySQL 5.6.6 版本开始默认启用&#xff0c;MySQL 的 performance_schema 数据库中的表格存储着服务器事件与查询执行的低水平统计数据。1、perform…

redis集群关闭 启动报错_使用虚拟机搭建 Redis 集群,实现数据库的负载均衡功能。...

实操题目:使用虚拟机搭建 Redis 集群&#xff0c;实现数据库的负载均衡功能。并使用图文描述整个过程。先创建集群:①创建集群需要使用ruby脚本,所以要先安装ruby环境 安装ruby环境:yum install ruby 安装ruby的包管理器:yum install rubygems②进入到redis的安装目录下的 src …

转载:Java编程风格与命名规范整理

转载自&#xff1a;传送门 不想复制&#xff0c;点进去看喽23333333转载于:https://www.cnblogs.com/Dumblidor/p/5394390.html