基于JS实现前端压缩上传图片的实例代码

下面是实现前端压缩上传图片的完整攻略：

1.背景介绍

在开发Web应用程序的过程中，图片是必不可少的一部分。然而，对于上传大图片来说，上传时间和带宽使用量都会大大增加。此时，前端图片压缩上传就是一个非常有用的技术，可以显著降低上传时间和带宽使用量。

2.基本思路

实现前端图片压缩上传的基本思路是：

使用HTML5的File API获取要上传的原始图片
使用Canvas将原始图片压缩为指定大小的图像
将压缩后的图像转换为Blob对象
使用Ajax将Blob对象上传到服务器

3.实现步骤

接下来，我们来具体实现前端图片压缩上传的步骤。

3.1 HTML部分

首先，我们需要在HTML文件中加入一个<input type="file">元素，用于选择需要上传的图片。例如：

<input type="file" id="inputImage">

3.2 JS部分

接下来，我们需要编写JavaScript代码，实现前端图片压缩上传的功能。

3.2.1 获取图片

首先，我们需要使用File API获取选择的原始图片。例如：

var inputImage = document.getElementById('inputImage');
var file = inputImage.files[0];

3.2.2 压缩图片

我们可以使用Canvas将原始图片压缩为指定大小的图像。例如：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.onload = function () {
    var width = 640; // 压缩后的宽度
    var height = img.height * (width / img.width); // 计算等比例缩放后的高度
    canvas.width = width; // 设置canvas尺寸
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height); // 绘制压缩后的图像到canvas上
    var compressedBlob = canvas.toDataURL('image/jpeg', 0.8); // 将canvas转为压缩后的Blob对象
};
img.src = URL.createObjectURL(file); // 加载原始图片

这里我们使用了canvas.toDataURL()方法将Canvas转换为压缩后的Blob对象，并且可以设置压缩质量（0.8表示80%质量）。

3.2.3 上传图片

最后，我们使用Ajax将压缩后的Blob对象上传到服务器。例如：

var xhr = new XMLHttpRequest();
xhr.open('POST', '/uploadImage', true);
xhr.onload = function () {
    // 上传成功后的操作
};
xhr.onerror = function () {
    // 上传失败后的操作
};
xhr.onloadstart = function () {
    // 上传开始时的操作
};
xhr.upload.onprogress = function (event) {
    console.log(event.loaded / event.total * 100 + '%'); // 显示上传进度
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); // 设置RequestHeader
xhr.send(compressedBlob); // 上传压缩后的Blob对象

4.示例说明

下面，我们使用两条示例来说明如何使用上述方法实现前端图片压缩上传。

4.1 示例1：基本版

在这个示例中，我们实现了一个基本版的前端图片压缩上传功能。

HTML代码：

<input type="file" id="inputImage">
<button id="uploadButton">上传</button>

JavaScript代码：

var inputImage = document.getElementById('inputImage');
var uploadButton = document.getElementById('uploadButton');

uploadButton.addEventListener('click', function () {
  var file = inputImage.files[0];
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var img = new Image();
  img.onload = function () {
    var width = 640; // 压缩后的宽度
    var height = img.height * (width / img.width); // 计算等比例缩放后的高度
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    var compressedBlob = canvas.toDataURL('image/jpeg', 0.8).split(',')[1]; // 将canvas转为base64后，只获取base64内容部分
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/uploadImage', true);
    xhr.onload = function () {
      // 上传成功后的操作
    };
    xhr.onerror = function () {
      // 上传失败后的操作
    };
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send('data=' + compressedBlob); // 发送POST请求，携带压缩后的base64内容部分
  };
  img.src = URL.createObjectURL(file);
});

使用这个示例，我们可以完成一个简单的前端图片压缩上传功能。然而，它具有以下不足：

压缩后的图片仍是base64格式，在上传到服务器时需要再进行一次转换，增加了服务端的负荷。
不能显示上传进度。

4.2 示例2：进阶版

这个示例是基于示例1的进阶版，它解决了上述不足之处。

HTML代码（与示例1相同）：

<input type="file" id="inputImage">
<button id="uploadButton">上传</button>