当今，移动端开发越来越受到人们的关注，而图片上传在大多数场景下都不可或缺。传统的图片上传方式面临的问题主要是图片文件过大，导致上传速度变慢，浪费流量，甚至可能导致服务器崩溃等问题。而今天我们介绍的H5移动端图片压缩上传开发流程，可以有效解决这些问题。
1. 实现原理
H5的File API提供了上传文件的功能，经过一系列转化后，我们可以将图片转化为Base64的字符串，通过Ajax请求上传到服务器。
图片压缩则是通过Canvas对图片进行处理，将原图片进行缩放，达到压缩的效果。具体而言，压缩的步骤如下：
- 选择图片文件，将其读入并转化为Base64的字符串；
- 将Base64的字符串转化为Image对象；
- 创建Canvas画布，绘制压缩后的图片；
- 将Canvas画布上的图片转化为Base64的字符串。
2. 压缩上传实现步骤
2.1 选择文件
首先，我们需要在HTML中添加一个input标签，用于选择文件，代码如下：
<input type="file" accept="image/*" id="fileInput">
accept属性指定了文件类型，这里只接受图片文件。id属性用于JavaScript中进行操作。
2.2 读取文件并压缩
我们通过JS获取选择的文件并读取，代码如下：
let fileInput = document.getElementById('fileInput');
let file = fileInput.files[0];
let reader = new FileReader();
reader.onload = function(evt) {
let base64 = evt.target.result;
let image = new Image();
image.onload = function() {
let canvas = document.createElement('canvas');
let maxWidth = 1280;
let maxHeight = 1280;
let width = image.width;
let height = image.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, width, height);
let base64Compressed = canvas.toDataURL('image/jpeg', 0.7);
// 在这里进行上传操作
};
image.src = base64;
};
reader.readAsDataURL(file);
代码中，我们首先获取input标签，然后从中取出选择的文件，在 onload 事件中，通过 FileReader 读取图片文件，并将其转换为 Base64 编码的字符串。接着，我们创建一个 Image 对象，将转换后的 Base64 字符串赋值给该对象的 src 属性，以获取图片的宽高信息。然后，通过 Canvas 对图片进行缩放处理，并将处理后的图片重新转化为 Base64 编码的字符串。
2.3 压缩后文件上传
在以上代码中，我们已经将压缩后的图片转化为Base64编码的字符串，现在我们需要将其上传到服务器。这里我们通过Ajax向服务器发送文件数据，代码如下：
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('file=' + encodeURIComponent(base64Compressed)));
这里通过XMLHttpRequest对象发起POST请求，设置请求头，将Base64编码的字符串通过send方法发送到服务器。
3. 示例说明
3.1 示例一：基本的图片上传实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传示例</title>
</head>
<body>
<input type="file" accept="image/*" id="fileInput">
<script>
let fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
let file = fileInput.files[0];
let reader = new FileReader();
reader.onload = function(evt) {
let base64 = evt.target.result;
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('file=' + encodeURIComponent(base64));
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
代码中，我们添加了一个事件监听器，当用户选择文件后触发，读取文件并将其转化为Base64编码的字符串。然后通过XMLHttpRequest对象向服务器发送带有该字符串的POST请求。
3.2 示例二：直接压缩上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片上传示例</title>
</head>
<body>
<input type="file" accept="image/*" id="fileInput">
<script>
let fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function() {
let file = fileInput.files[0];
let reader = new FileReader();
reader.onload = function(evt) {
let base64 = evt.target.result;
let image = new Image();
image.onload = function() {
let canvas = document.createElement('canvas');
let maxWidth = 1280;
let maxHeight = 1280;
let width = image.width;
let height = image.height;
if (width > height) {
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
}
} else {
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
}
}
canvas.width = width;
canvas.height = height;
let ctx = canvas.getContext('2d');
ctx.drawImage(image, 0, 0, width, height);
let base64Compressed = canvas.toDataURL('image/jpeg', 0.7);
let xhr = new XMLHttpRequest();
xhr.open('POST', '/upload');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('file=' + encodeURIComponent(base64Compressed));
};
image.src = base64;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>
在这个示例中，我们不再将未压缩的图片上传到服务器，而是在读取文件的事件中，直接利用 Canvas 对图片进行压缩并转化为 Base64 编码的字符串，然后通过Ajax上传到服务器。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：H5移动端图片压缩上传开发流程 - Python技术站
微信扫一扫 
支付宝扫一扫 