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' }); } }); } } ```

0
收藏0
文章版权声明:除非注明,否则均为VPS857原创文章,转载或复制请以超链接形式并注明出处。

相关阅读

  • 【研发日记】Matlab/Simulink自动生成代码(二)——五种选择结构实现方法,Matlab/Simulink自动生成代码的五种选择结构实现方法(二),Matlab/Simulink自动生成代码的五种选择结构实现方法详解(二)
  • 超级好用的C++实用库之跨平台实用方法,跨平台实用方法的C++实用库超好用指南,C++跨平台实用库使用指南,超好用实用方法集合,C++跨平台实用库超好用指南,方法与技巧集合
  • 【动态规划】斐波那契数列模型(C++),斐波那契数列模型(C++实现与动态规划解析),斐波那契数列模型解析与C++实现(动态规划)
  • 【C++】,string类底层的模拟实现,C++中string类的模拟底层实现探究
  • uniapp 小程序实现微信授权登录(前端和后端),Uniapp小程序实现微信授权登录全流程(前端后端全攻略),Uniapp小程序微信授权登录全流程攻略,前端后端全指南
  • Vue脚手架的安装(保姆级教程),Vue脚手架保姆级安装教程,Vue脚手架保姆级安装指南,Vue脚手架保姆级安装指南,从零开始教你如何安装Vue脚手架
  • 如何在树莓派 Raspberry Pi中本地部署一个web站点并实现无公网IP远程访问,树莓派上本地部署Web站点及无公网IP远程访问指南,树莓派部署Web站点及无公网IP远程访问指南,本地部署与远程访问实践,树莓派部署Web站点及无公网IP远程访问实践指南,树莓派部署Web站点及无公网IP远程访问实践指南,本地部署与远程访问详解,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南,树莓派部署Web站点及无公网IP远程访问实践详解,本地部署与远程访问指南。
  • vue2技术栈实现AI问答机器人功能(流式与非流式两种接口方法),Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法探究,Vue2技术栈实现AI问答机器人功能,流式与非流式接口方法详解
  • 发表评论

    快捷回复:表情:
    评论列表 (暂无评论,0人围观)

    还没有评论,来说两句吧...

    目录[+]

    取消
    微信二维码
    微信二维码
    支付宝二维码