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

})