uniapp 上传压缩图片 兼容h5和小程序的方法，Uniapp上传压缩图片，H5与小程序兼容的方法，Uniapp上传压缩图片，实现H5与小程序兼容的解决方法

温馨提示：这篇文章已超过442天没有更新，请注意相关的内容是否还可用！

摘要：，，本文介绍了在uniapp中上传压缩图片的方法，同时兼容H5和小程序。通过特定的技术实现，确保了图片在上传前的压缩处理，以减小文件大小和提高上传速度。该方法保证了在不同平台（H5和小程序）上的兼容性，确保用户体验的一致性。这是一种有效的解决方案，适用于需要处理图片上传的uniapp开发项目。

本文介绍了在uniapp中如何实现上传压缩图片的功能，同时兼容H5和小程序，通过利用uniapp框架的特性，实现了图片的压缩处理，并能在不同平台上进行上传，文章详细阐述了如何在H5和小程序中实现这一功能，提供了一种有效的解决方案，以满足不同平台的需求。

uniapp 上传压缩图片兼容h5和小程序的方法，Uniapp上传压缩图片，H5与小程序兼容的方法，Uniapp上传压缩图片，实现H5与小程序兼容的解决方法第1张

项目介绍：

该项目最初专注于在uniapp中进行App端的开发，随着项目的扩展，也开始支持H5端的开发，由于uniapp框架具有跨平台的特性，因此移动端和H5端使用的是相同的代码基础。

图片上传与压缩问题：

在上传头像时，为了确保图片大小在2MB以下，需要进行图片压缩，App端当时使用的是uni.compressImage()进行压缩（详情参见uniapp媒体图片压缩接口），H5端并不支持此方法。

H5端的图片压缩解决方案：

uniapp 上传压缩图片兼容h5和小程序的方法，Uniapp上传压缩图片，H5与小程序兼容的方法，Uniapp上传压缩图片，实现H5与小程序兼容的解决方法第2张

为了解决这个问题，我们需要在H5端实现图片压缩功能，幸运的是，网上有许多现成的算法可以使用。

我们采用了一个基于二分查找的算法来找到一个合适的图像质量系数，使得压缩后的图片文件大小接近目标大小，具体的实现如下：

H5端图片压缩函数：

// H5压缩：使用二分查找算法来找到一个合适的图像质量系数，使得压缩后的图片文件大小接近目标大小
export function compressH5(fileItem, targetSizeKB, initialQuality = 1.0) {
    const maxQuality = 1.0;
    const minQuality = 0.0;
    const tolerance = 0.1; // 根据需要调整公差范围
    return new Promise((resolve, reject) => {
        const binarySearch = (min, max) => {
            const midQuality = (min + max) / 2;
            const reader = new FileReader();
            reader.readAsDataURL(fileItem);
            reader.onload = function () {
                const img = new Image();
                img.src = this.result;
                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    const ctx = canvas.getContext('2d');
                    canvas.width = img.width;
                    canvas.height = img.height;
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0); // 使用drawImage绘制图片到canvas上，无需指定画布大小参数，直接使用图片的原始尺寸即可，使用异步的 toBlob 方法进行压缩，canvas.toBlob((blob) => { const fileSizeKB = blob.size / 1024; if (Math.abs(fileSizeKB - targetSizeKB) < tolerance) { resolve(blob); } else if (fileSizeKB < targetSizeKB) { binarySearch(midQuality, max);} else { binarySearch(min, midQuality);} }, 'image/jpeg', midQuality); }; reader.onerror = function (error) { reject(error); }; }; // 开始二分查找 binarySearch(minQuality, maxQuality); }); } //调用方法：当用户选择图片后，进行压缩并上传 chooseImg1() { uni.chooseImage({ count: 1, sizeType: ['compressed'], success: (chooseImageRes) => { const tempFilePaths = chooseImageRes.tempFilePaths; const filePath = tempFilePaths[0]; uni.getFileInfo({ filePath: filePath, success: (fileInfo) => { const fileSize = fileInfo.size; // 图片文件大小（单位：字节） // 判断图片大小是否超过目标值（设置为不超过2MB） if (fileSize > 21024 * 1024) { // 如果超过目标大小（例如设置为不超过2MB），进行压缩（使用compressH5函数） const targetSizeMB = 2; // 设置目标文件大小（单位：MB），根据需求调整 compressH5(chooseImageRes.tempFiles[0], targetSizeMB1024).then((compressedFile) => { console.log('compressed file:', compressedFile); this.uploadCompressedImage(compressedFile); }).catch((err) => { console.log('error:', err); }); } else { // 如果未超过目标大小（例如不超过2MB），直接上传原图 this.uploadCompressedImage(filePath); } }, fail: (err) => { console.error('获取文件信息失败:', err); uni.showToast({ title: '获取文件信息失败，请重试', icon: 'none' }); } }); } } ```