如何使用JavaScript进行图片等比压缩？
在前端开发中，我们经常需要将图片等比压缩后再上传到服务器或者存储到本地。这不仅能够减少网络传输的数据量，还能够加快页面加载速度。下面将介绍如何使用JavaScript进行图片等比压缩。
一、需求背景
在实际开发中，我们常常需要将一个File对象或者base64字符串压缩之后再变为File对象或者base64字符串传入到远程图片服务器或数据库中。有时候，图片数据可能是一块canvas画布，或者是一个Image对象，或者直接就是一个图片的URL地址，需要将它们压缩上传到远程服务器。面对这么多的需求，可以参考以下方法：
二、解决办法
如上图所示，我们可以通过以下七个方法来实现JS中大部分文件类型的转换与压缩：
1. urltoImage(url,fn)
该方法会通过一个URL加载所需的图片对象，其中url参数传入图片的URL地址，fn为回调方法，包含一个Image对象的参数。代码如下：
```javascript
function urltoImage(url, fn) {
var img new Image();
url;
function () {
fn fn(img);
};
}
```
2. imagetoCanvas(image)
该方法会将一个Image对象转变为一个Canvas类型对象，其中image参数传入一个Image对象。代码如下：
```javascript
function imagetoCanvas(image) {
var canvas ("canvas");
canvas.width image.width;
canvas.height image.height;
("2d").drawImage(image, 0, 0);
return canvas;
}
```
3. canvasResizetoFile(canvas,quality,fn)
该方法会将一个Canvas对象压缩转变为一个Blob类型对象，其中canvas参数传入一个Canvas对象；quality参数传入一个0-1的number类型，表示图片压缩质量；fn为回调方法，包含一个Blob对象的参数。代码如下：
```javascript
function canvasResizetoFile(canvas,quality,fn) {
(function (blob) {
fn fn(blob);
}, "image/jpeg", quality);
}
```
这里的Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。File接口基于Blob，继承了Blob的功能并将其扩展使其支持用户系统上的文件。可以将其当做File类型对待，其他更具体的用法可以参考MDN文档。
4. canvasResizetoDataURL(canvas,quality)
该方法会将一个Canvas对象压缩转变为一个dataURL字符串，其中canvas参数传入一个Canvas对象；quality参数传入一个0-1的number类型，表示图片压缩质量。代码如下：
```javascript
function canvasResizetoDataURL(canvas,quality){
return ("image/jpeg",quality);
}
```
其中的toDataURL API可以参考MDN文档。
5. filetoDataURL(file,fn)
该方法会将File（Blob）类型文件转变为dataURL字符串，其中file参数传入一个File（Blob）类型文件；fn为回调方法，包含一个dataURL字符串的参数。代码如下：
```javascript
function filetoDataURL(file,fn){
var reader new FileReader();
function(e){
fn fn();
}
(file);
}
```
6. dataURLtoImage(dataurl,fn)
该方法会将一串dataURL字符串转变为Image类型文件，其中dataurl参数传入一个dataURL字符串，fn为回调方法，包含一个Image类型文件的参数。代码如下：
```javascript
function dataURLtoImage(dataurl,fn){
var img new Image();
function(){
fn fn(img);
}
dataurl;
}
```
7. dataURLtoFile(dataurl)
该方法会将一串dataURL字符串转变为Blob类型对象，其中dataurl参数传入一个dataURL字符串。代码如下：
```javascript
function dataURLtoFile(dataurl){
var arr dataurl.split(","),
mime arr[0].match(/:(.*?);/)[1],
bstr atob(arr[1]),
n bstr.length,
u8arr new Uint8Array(n);
while(n--){
u8arr[n] (n);
}
return new Blob([u8arr],{type:mime});
}
```
三、进一步封装
对于常用的将一个File对象压缩之后再变为File对象，可以将上面的方法再封装一下，参考如下代码：
```javascript
function compress(file,quality,fn){
var reader new FileReader(),
img new Image();
(file);
function(){
;
}
function(){
var canvas imagetoCanvas(this),
dataURL canvasResizetoDataURL(canvas,quality);
blob dataURLtoFile(dataURL);
fn fn(blob);
}
}
```
其中，file参数传入一个File（Blob）类型文件；quality参数传入一个0-1的number类型，表示图片压缩质量；fn为回调方法，包含一个Blob类型文件的参数。它使用起来就像下面这样：
```javascript
var file ('input').files[0];
compress(file,0.8,function(blob){
//...发送到服务器
})
```
四、总结
通过以上介绍，我们可以使用JavaScript对图片进行等比压缩，并将其转换成File对象或base64字符串传递给服务器或数据库。这种方法可以有效地减少网络传输的数据量，提高页面加载速度，从而改善用户体验。
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
