移动端利用H5实现压缩图片上传的功能

段落一：需求背景和功能分析 随着移动设备的普及，上传图片已经成为了移动应用中常见的需求。但是，由于移动设备的存储空间和网络带宽的限制，上传大尺寸的图片会导致用户长时间等待和用户体验下降的情况，为了解决这个问题，压缩图片上传功能的需求应运而生。本文将利用H5技术设计和实现移动端压缩图片上传的功能。 首先分析功能，图片上传功能主要包括选择图片、压缩图片和上传图片三个步骤。其中，选择图片可以通过H5的file input控件实现，压缩图片和上传图片需要使用H5的Canvas和FormData技术，具体实现方式在下面的段落中详细讲解。

1、选择图片

用H5的file input控件实现选择图片功能：

<input type="file" id="uploadFile" accept="image/*">

段落二：图片压缩实现和代码分析 在选择图片后，我们需要将图片进行压缩，以减小文件大小，提高上传速度。这里我们将使用H5的Canvas技术来实现图片压缩，通过重新生成一个Canvas标签，将原图画在新Canvas上，设置压缩比例，最终输出压缩后的图片数据。

2、图片压缩

利用H5的Canvas实现图片压缩：

// 将图片压缩成指定大小
function compressImage(file, maxWidth, maxHeight, quality) {
    // 创建一个Image对象，实现图片的读取与生成的过程
    let img = new Image();
    // 传入图片的URL参数，实现图片的加载
    img.src = window.URL.createObjectURL(file);
    return new Promise(resolve => {
        img.onload = () => {
            // 加载图片成功后执行
            let canvas = document.createElement('canvas');
            let ctx = canvas.getContext('2d');
            // 如果原图片大小小于指定的最大尺寸，则不进行压缩
            let width = img.width;
            let height = img.height;
            if (width <= maxWidth && height <= maxHeight) {
                quality = 1;
            } else {
                // 按照比例缩放图片
                let ratio = Math.min(maxWidth / width, maxHeight / height);
                width *= ratio;
                height *= ratio;
            }
            // 设置canvas的高度和宽度
            canvas.width = width;
            canvas.height = height;
            // 将图片画在canvas上，并设置压缩比例
            ctx.drawImage(img, 0, 0, width, height);
            // 将Canvas转成dataURL
            let dataURL = canvas.toDataURL(file.type, quality);
            // 将dataURL转成Blob对象，并返回Promise对象
            resolve(dataURLtoBlob(dataURL));
        };
    });
}

段落三：图片上传实现和代码分析 图片压缩完成后，我们需要将图片上传至服务器，这里我们采用H5的FormData技术来实现。将压缩后的图片数据封装成FormData对象并提交给服务器，上传完成后可以通过服务器返回的数据来判断上传是否成功，根据返回数据可以做进一步的操作，如显示上传结果、显示上传进度等。

3、图片上传

利用H5的FormData实现图片上传：

// 发送图片请求
function sendImageRequest(url, file, params) {
    let data = new FormData();
    data.append('file', file);
    // 如果有参数，在这里添加
    if (params) {
        for(let key in params) {
            data.append(key, params[key]);
        }
    }
    return new Promise(resolve => {
        let xhr = new XMLHttpRequest();
        xhr.open('POST', url, true);
        xhr.upload.onprogress = (event) => {
            // 显示上传进度
            if (event.lengthComputable) {
                let percentComplete = Math.round(event.loaded / event.total * 100);
                console.log('上传进度：' + percentComplete + '%');
            }
        };
        xhr.onload = (event) => {
            if (xhr.status === 200) {
                // 上传成功，在这里处理返回的数据
                console.log(xhr.responseText);
                resolve(xhr.responseText);
            }
        };
        xhr.onerror = () => {
            // 上传失败
            console.log('上传失败');
            resolve(false);
        };
        xhr.send(data);
    });
}

段落四：具体实现和代码 以上就是移动端利用H5实现压缩图片上传的代码分析和实现方案。下面是具体实现和完整代码示例：

4、具体实现和完整代码

let fileInput = document.getElementById('uploadFile');
let imgView = document.getElementById('imagePreview');
let uploadUrl = 'http://server.com/upload';
let maxWidth = 800;
let maxHeight = 800;
let quality = 0.7;

fileInput.addEventListener('change', () => {
    let file = fileInput.files[0];
    if (!file) {
        return;
    }
    // 显示预览图片
    let reader = new FileReader();
    reader.onload = (event) => {
        imgView.src = event.target.result;
        imgView.onload = () => {
            // 图片压缩
            compressImage(file, maxWidth, maxHeight, quality).then(blob => {
                if (blob) {
                    // 图片上传
                    sendImageRequest(uploadUrl, blob, { filename: file.name }).then(res => {
                        // 上传完成操作
                        console.log(res);
                    });
                }
            });
        };
    };
    reader.readAsDataURL(file);
});