image-compress-tool
v1.0.1
Published
A javascript compression tool, converts the image into BLOB data through canvas.
Downloads
10
Maintainers
Readme
image-compress-tool
前端图片压缩工具,通过canvas将图片转为blob数据。对于iOS上可能存在的照片偏转90°的问题进行自动修正。
引入和使用
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();
})