uniapp H5上传图片前压缩

embedded/2024/11/23 12:46:24/

问题:需要在上传图片前压缩图片,但是uni.compressImage()不支持h5

解决方法:使用canvas降低图片质量

核心代码:

 // 创建一个 img 元素来加载图片const img = new Image()img.src = imagePath// 创建 canvas 元素const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 设置 canvas 的宽高为压缩后的图片宽高const maxWidth = 800 // 最大宽度const maxHeight = 800 // 最大高度let width = img.widthlet height = img.height// 根据最大宽高比例调整图片尺寸if (width > height) {if (width > maxWidth) {height = height * (maxWidth / width)width = maxWidth}} else {if (height > maxHeight) {width = width * (maxHeight / height)height = maxHeight}}// 设置 canvas 尺寸canvas.width = widthcanvas.height = height// 绘制压缩后的图片到 canvas 上ctx.drawImage(img, 0, 0, width, height)// 调整图片质量的函数,直到大小小于 500KBfunction compressImage(quality) {const compressedImage = canvas.toDataURL('image/jpeg', quality) // 质量控制const size = (compressedImage.length * 3) / 4 / 1024 // 计算压缩后的大小,单位为 KBif (size > 500 && quality > 0.1) {// 如果图片大于500KB,降低质量重新压缩return compressImage(quality - 0.05)} else {// 如果图片小于500KB,或者达到最低质量,返回结果return compressedImage}}const compressedImage = compressImage(0.8) // 初始质量为 0.8

完整代码:

function fromAlbum() {uni.chooseImage({count: 1, // 默认选择 1 张图片sizeType: ['original', 'compressed'], // 选择原图或压缩图success: function (res) {uni.setStorage({key: 'tongueData',data: '',})tongueImageSrc.value = ''const imagePath = res.tempFilePaths[0] // 获取选中的图片路径// 创建一个 img 元素来加载图片const img = new Image()img.src = imagePathimg.onload = function () {// 创建 canvas 元素const canvas = document.createElement('canvas')const ctx = canvas.getContext('2d')// 设置 canvas 的宽高为压缩后的图片宽高const maxWidth = 800 // 最大宽度const maxHeight = 800 // 最大高度let width = img.widthlet height = img.height// 根据最大宽高比例调整图片尺寸if (width > height) {if (width > maxWidth) {height = height * (maxWidth / width)width = maxWidth}} else {if (height > maxHeight) {width = width * (maxHeight / height)height = maxHeight}}// 设置 canvas 尺寸canvas.width = widthcanvas.height = height// 绘制压缩后的图片到 canvas 上ctx.drawImage(img, 0, 0, width, height)// 调整图片质量的函数,直到大小小于 500KBfunction compressImage(quality) {const compressedImage = canvas.toDataURL('image/jpeg', quality) // 质量控制const size = (compressedImage.length * 3) / 4 / 1024 // 计算压缩后的大小,单位为 KBif (size > 500 && quality > 0.1) {// 如果图片大于500KB,降低质量重新压缩return compressImage(quality - 0.05)} else {// 如果图片小于500KB,或者达到最低质量,返回结果return compressedImage}}const compressedImage = compressImage(0.8) // 初始质量为 0.8// 上传压缩后的图片uni.uploadFile({url: ,//填自己的路径filePath: compressedImage, // 上传压缩后的图片name: 'file',success: async (uploadFileRes) => {const { code, data, msg } = JSON.parse(uploadFileRes.data) || {}if (code === 0 && data && data.local_path) {console.log('上传图片成功')} else {console.log('上传图片失败')}},complete: () => {console.log('完成')},})}},})
}


http://www.ppmy.cn/embedded/139850.html

相关文章

自动驾驶之激光雷达

这里写目录标题 1 什么是激光雷达2 激光雷达的关键参数3 激光雷达种类4 自动驾驶感知传感器5 激光雷达感知框架5.1 pointcloud_preprocess5.2 pointcloud_map_based_roi5.3 pointcloud_ground_detection5.4 lidar_detection5.5 lidar_detection_filter5.6 lidar_tracking 1 什么…

封装实现通用的 `forEach` 函数:深入JavaScript的迭代机制与细节优化

封装实现通用的 forEach 函数:深入JavaScript的迭代机制与细节优化 在JavaScript中,forEach 方法是数组对象上一个非常实用的迭代方法,它允许我们遍历数组中的每一个元素,并对每个元素执行指定的回调函数。虽然JavaScript已经内置…

C# 中Timer的三种用法

在 C# 中,Timer 类可以用于在不同情况下定时执行代码。常见的 Timer 类有三种主要用法,分别由不同的命名空间提供: System.Timers.Timer System.Threading.Timer System.Windows.Forms.Timer(主要用于 Windows 窗体应用程序&#…

JavaScript数据类型判断

在 JavaScript 中,可以通过多种方式来判断数据类型,以下是常用的几种方法: 1. typeof 操作符 typeof 用于判断基本数据类型和部分对象类型。 console.log(typeof 123); // "number" console.log(typeof "hello"); // &…

android 动画原理分析

一 android 动画分为app内的view动画和系统动画 基本原理都是监听Choreographer的doframe回调 二 app端的实现是主要通过AnimationUtils来实现具体属性的变化通过invilate来驱动 wms来进行更新。这个流程是在app进程完成 这里不是我分析的重点 直接来看下系统动画里面的本地动…

【C++】拆分详解 - 多态

文章目录 一、概念二、定义和实现1. 多态的构成条件2. 虚函数2.1 虚函数的重写/覆盖2.2 虚函数重写的两个例外 3. override 和 final关键字4. 重载/重写/隐藏的对比5. 例题 三、纯虚函数和抽象类四、多态的原理1. 虚函数表2. 实现原理3. 动态绑定和静态绑定 总结 一、概念 多态…

skywalking es查询语句整理

查找特定时间范围内,与特定服务相关的service_relation_server_side指标 {"size": 0,"query": {"bool": {"must": [{"range": {"time_bucket": {"from": 202411221112,"to": 2024…

jmeter操作数据库

简介 Apache JMeter 是一个强大的开源工具,用于负载测试和性能测量。除了Web应用外,JMeter还可以用于测试各种数据库系统,包括MySQL。本文将详细介绍如何使用JMeter来测试MySQL数据库的性能。 环境准备 安装Java:确保你已经安装…