前端js实现的图片在线压缩功能

在我们的日常生活与工作中，经常遇到需要在各类网站中填写资料进行上传审核的场景，其中免不了要按照各种要求对照片进行裁剪压缩等。例如某网站要求上传登记照的宽度要小于200像素，高度要小于400像素，照片大小要小于500Kb等。这时候我们就要想尽办法，尝试各种APP将图片进行修改，以图达到最终要求。对于没有P图经验的人而言，这是个痛苦而且繁琐的任务。因此现在实现一种可以在前端一键生成符合不同审核规定照片的功能，他的实质是使用算法，将照片按照规则进行压缩。首先该功能的地址是图片在线一键压缩下面介绍如何帮助.

## STEP1  

首先点击加号，选择某张需要转换的图片进行加载。每次最多只能选择一张照片。在照片缩略图左侧会显示原始照片的相关数据。

此时，将鼠标移动到照片预览框中，点击放大镜可以浏览照片原图，点击删除后可以将加载的照片删除。注意：只有在删除了加载的照片后，才能点击加号选择加载另一张照片，否则点击加号没有响应。  

 

## STEP2

此时下方输入框中也会自动加载当前图片的原始宽高，并且宽高比是始终锁定的，可以根据审核的标准，手动的改变宽高大小。并且设置转换后希望被限制的最大文件大小。

 

## STEP3  

选择生成图片所使用的算法，默认是使用混合算法，不需要修改。如果对图片的清晰度要求不高，同时对图片的最大尺寸较为敏感，可以使用尺寸优先算法。但是绝大多数情况下，不需要修改图片生成算法。  

 

## STEP4  

点击一键生成按钮，等待几秒钟即可自动生成符合审核规定的照片。并弹出下载框,可以观察下载框上标注的文件尺寸大小是否符合要求，并点击保存到本地即可。 

使用非常方便，可以一键生成自己想要的符合规格的照片。在极限情况下，对于照片的质量也没有多少损伤。现在使用的地址为：在线一键压缩