H5移动端图片压缩上传开发流程-前端开发

当今，移动端开发越来越受到人们的关注，而图片上传在大多数场景下都不可或缺。传统的图片上传方式面临的问题主要是图片文件过大，导致上传速度变慢，浪费流量，甚至可能导致服务器崩溃等问题。而今天我们介绍的H5移动端图片压缩上传

当今，移动端开发越来越受到人们的关注，而图片上传在大多数场景下都不可或缺。传统的图片上传方式面临的问题主要是图片文件过大，导致上传速度变慢，浪费流量，甚至可能导致服务器崩溃等问题。而今天我们介绍的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上传到服务器。