image-compress-tool

image-compress-tool

前端图片压缩工具，通过canvas将图片转为blob数据。对于iOS上可能存在的照片偏转90°的问题进行自动修正。

• 按照文件大小进行压缩
• 按照目标尺寸进行截取
• 指定目标文件格式（jpg/png）
• 获取ios照片的旋转角度
• blob数据的使用方法

引入和使用

npm install image-compress-tool --save

import {compressImage} from "image-compress-tool"

compressImage({
	// 配置参数
	file: document.getElementById("avatar").files[0],
	// ...
}).then((blob,fileName)=>{
	// 处理成功的回调函数
	// ...
})

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg">

如果要使用script标签引入使用，请参考博客文章。

方法说明

compressImage() 是主要方法，传入一个配置对象{ file, name, type, quality, size, width, height }

file	必填，选中的照片文件，input[type=file].files[0]
name	自定义文件名，不包含后缀(如.jpg)，默认原文件名
quality	图片质量系数，0-1，默认0.92
size	图片目标大小，单位kb
width	图片目标宽度
height	图片目标高度

compressImage() 返回一个Promise，成功的回调函数有两个参数blob和fileName

bolb	处理之后的图片二进制数据，可用于img标签展示、fromData上传、图片文件下载等
fileName	完整文件名，如："user_avatar.png"

按照文件大小进行压缩

会改变图片大小和图片质量，不会改变图片的宽高比例。

例如：将图片压缩至500kb以下

compressImage({
	file: document.getElementById("avatar").files[0],
	size: 500
}).then((blob,fileName)=>{
	// ...
})

按照目标尺寸进行截取

例如：将图片宽度压缩至600px，高度自适应

compressImage({
	file: document.getElementById("avatar").files[0],
	width: 600
}).then((blob,fileName)=>{
	// ...
})

例如：将图片高度压缩至400px，宽度自适应

compressImage({
	file: document.getElementById("avatar").files[0],
	width: 600
}).then((blob,fileName)=>{
	// ...
})

例如：将图片压缩至600*400，如果图片太长或太宽，会从中间进行截取

compressImage({
	file: document.getElementById("avatar").files[0],
	width: 600,
	height: 400
}).then((blob,fileName)=>{
	// ...
})

指定目标文件格式

指定转换之后的格式，不管选中的源文件是jpg还是png。

例如：统一转换到png格式

compressImage({
	file: document.getElementById("avatar").files[0],
	type: "png"
}).then((blob,fileName)=>{
	// ...
})

例如：压缩文件到500kb以下的png格式，且指定文件名

compressImage({
	file: document.getElementById("avatar").files[0],
	size: 500,
	name: "user_avatar_156495325",
	type: "png"
}).then((blob,fileName)=>{
	// 此处的fileName就是 "user_avatar_156495325.png"
	// ...
})

获取ios照片的旋转角度

import {getOrientation} from "image-compress-tool"

getOrientation(document.getElementById("avatar").files[0]).then((orientation)=>{
	// orientation 可能的值：1,3,6,8
	// 1: 默认值，不需要修正
	// 3: 需要旋转180°以修正
	// 6: 需要正时针旋转90°以修正
	// 8: 需要正时针旋转270°以修正
})

blob数据的使用方法

compressImage({
	file: document.getElementById("avatar").files[0],
	size: 500
}).then((blob,fileName)=>{
	
	/**** 通过<img>显示 ****/
	var img = document.createElement("img");
	img.src = URL.createObjectURL(blob);
	document.body.append(img);
	
	/**** formData上传图片 ****/
	var formData = new FormData();
	formData.append("file", blob, fileName);
	$.ajax({
	    url: 'api/upload/img',
	    type: 'POST',
	    data: formData,
	    success: function(returndata) {
	        console.log("上传成功")
	    }
	})
	
	/**** 下载图片 ****/
	var a = document.createElement('a');
	a.setAttribute('download', fileName);
	a.href = URL.createObjectURL(blob);
	a.click();

})