image-compress-tool v1.0.1

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 }

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

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

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

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

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

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

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

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°以修正
})

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();

})