微信小程序压缩图片

由于wx.compressImage(Object object) iOS 仅支持压缩 JPG 格式图片。所以我们需要做一下特殊的处理:

1.获取文件,判断文件是否大于设定的大小

2.如果大于则使用canvas进行绘制,并生成新的图片路径

3.上传图片

async chooseImage() {let res = await wx.chooseMedia({count: 1,sizeType: ["compressed"],mediaType: ['image']})if (res.tempFiles[0].size > 500 * 1024) { //大于500k//压缩图片compressImage(res.tempFiles[0], '#canvasId').then(result => {this.uploadFile(result.tempFilePath)})} else {this.uploadFile(res.tempFiles[0].tempFilePath)}},
const compressImage = function (file, node) {return new Promise((resolve, reject) => {//获取图片的信息wx.getImageInfo({src: file.tempFilePath,success: async function (imageInfo) {//获取canvasconst query = wx.createSelectorQuery()let canvasDom = query.select(node) //画布idcanvasDom.fields({node: true,size: true}).exec((res) => {const canvas = res[0].nodecanvas.width = 900 canvas.height = 900const ctx = canvas.getContext('2d')let img = canvas.createImage();img.src = imageInfo.path; //要压缩的图片路径img.onload = () => {// 将图片绘制到canvasctx.drawImage(img, 0, 0, canvas.width, canvas.height)// 生成图片wx.canvasToTempFilePath({canvas,destWidth: 900, //压缩后宽destHeight: 900, //压缩后高fileType: 'jpg',quality: 0.8, //质量,可自定义success: (imgResult) => {let fs = wx.getFileSystemManager()fs.getFileInfo({filePath: imgResult.tempFilePath,success: (res) => {//压缩后的图片如果还是大于500k,那么继续压缩直到小于500为止if (res.size > 500 * 1024) {compressImage(imgResult)} else {resolve(imgResult)}}})},fail: (err) => {console.error(err);reject(err)}})}})},fail: function (err) {console.error('获取图片信息失败:', err);}});})
}
uploadFile(avatarUrl) {if (avatarUrl) {wx.uploadFile({filePath: avatarUrl,name: 'file',url: "http://139.224.49.138:888/mini/myPage/uploadAvatar",formData: {openid: getApp().globalData.openid},success: (res) => {let {userInfo} = app.store.getState();userInfo.headPic = JSON.parse(res.data).urlapp.store.setState({userInfo: userInfo});},fail: err => {console.log(err);}})}},
<canvas hidden="{{true}}" type="2d" id="canvasId"/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/893954.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国内flutter环境部署(记录篇)

设置系统环境变量 export PUB_HOSTED_URLhttps://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn使用以下命令下载flutter镜像 git clone -b stable https://mirror.ghproxy.com/https://github.com/<github仓库地址>#例如flutter仓…

【uniapp】uniapp使用java线程池

标题 由于js是性能孱弱的单线程语言&#xff0c;只要在渲染中执行了一些其他操作&#xff0c;会中断渲染&#xff0c;导致页面卡死&#xff0c;卡顿&#xff0c;吐司不消失等问题。在安卓端可以调用java线程池&#xff0c;把耗时操作写入线程池里面&#xff0c;优化性能。 实…

多级缓存(亿级并发解决方案)

多级缓存&#xff08;亿级流量&#xff08;并发&#xff09;的缓存方案&#xff09; 传统缓存的问题 传统缓存是请求到达tomcat后&#xff0c;先查询redis&#xff0c;如果未命中则查询数据库&#xff0c;问题如下&#xff1a; &#xff08;1&#xff09;请求要经过tomcat处…

第27篇 基于ARM A9处理器用C语言实现中断<三>

Q&#xff1a;基于ARM A9处理器怎样设计C语言工程&#xff0c;同时使用按键中断和定时器中断在红色LED上计数&#xff1f; A&#xff1a;基本原理&#xff1a;设置HPS Timer 0和按键中断源&#xff0c;主程序调用set_A9_IRQ_stack( )函数设置中断模式的ARM堆栈指针&#xff0c…

C++ 中用于控制输出格式的操纵符——setw 、setfill、setprecision、fixed

目录 四种操纵符简要介绍 setprecision基本用法 setfill的基本用法 fixed的基本用法 setw基本用法 以下是一些常见的用法和示例&#xff1a; 1. 设置字段宽度和填充字符 2. 设置字段宽度和对齐方式 3. 设置字段宽度和精度 4. 设置字段宽度和填充字符&#xff0c;结合…

JS宏进阶:闭包与代理

在JavaScript中&#xff0c;闭包和代理是两种重要的概念&#xff0c;它们各自具有独特的功能和用途。闭包&#xff0c;它指的是一个函数能够访问并操作其父函数作用域中的变量&#xff0c;即使父函数已经执行完毕。它允许内部函数访问外部函数的变量&#xff0c;从而提供了强大…

【1.安装ubuntu22.04】

目录 参考文章链接电脑参数安装过程准备查看/更改引导方式查看/更改磁盘的分区格式关闭BitLocker加密压缩分区关闭独显直连制作Ubuntu安装盘下载镜像制作启动盘 进入BIOS模式进行设置Secure Boot引导项顺序try or install ubuntu 进入安装分区启动引导器个人信息和重启 参考文章…

代码随想录算法【Day34】

Day34 62.不同路径 思路 第一种&#xff1a;深搜 -> 超时 第二种&#xff1a;动态规划 第三种&#xff1a;数论 动态规划代码如下&#xff1a; class Solution { public:int uniquePaths(int m, int n) {vector<vector<int>> dp(m, vector<int>(n,…

计算机毕业设计PySpark+hive招聘推荐系统 职位用户画像推荐系统 招聘数据分析 招聘爬虫 数据仓库 Django Vue.js Hadoop

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

强化学习数学原理(三)——迭代算法

一、值迭代过程 上面是贝尔曼最优公式&#xff0c;之前我们说过&#xff0c;f(v)v&#xff0c;贝尔曼公式是满足contraction mapping theorem的&#xff0c;能够求解除它最优的策略和最优的state value&#xff0c;我们需要通过一个最优v*&#xff0c;这个v*来计算状态pi*&…

【机器学习】自定义数据集 使用pytorch框架实现逻辑回归并保存模型,然后保存模型后再加载模型进行预测

一、使用pytorch框架实现逻辑回归 1. 数据部分&#xff1a; 首先自定义了一个简单的数据集&#xff0c;特征 X 是 100 个随机样本&#xff0c;每个样本一个特征&#xff0c;目标值 y 基于线性关系并添加了噪声。将 numpy 数组转换为 PyTorch 张量&#xff0c;方便后续在模型中…

AI 浪潮席卷中国年,开启科技新春新纪元

在这博主提前祝大家蛇年快乐呀&#xff01;&#xff01;&#xff01; 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;其影响力已经渗透到社会生活的方方面面。在中国传统节日 —— 春节期间&#xff0c;AI 技术也展现出了巨大的潜力&#xff0c;为中国年带…

vim的特殊模式-可视化模式

可视化模式&#xff1a;按 v进入可视化模式 选中 y复制 d剪切/删除 可视化块模式: ctrlv 选中 y复制 d剪切/删除 示例&#xff1a; &#xff08;vim可视化模式的进阶使用&#xff1a;vim可视化模式的进阶操作-CSDN博客&#xff09;

【微服务与分布式实践】探索 Eureka

服务注册中心 心跳检测机制&#xff1a;剔除失效服务自我保护机制 统计心跳失败的比例在15分钟之内是否低于85%&#xff0c;如果出现低于的情况&#xff0c;Eureka Server会将当前的实例注册信息保护起来&#xff0c;让这些实例不会过期。当节点在短时间内丢失过多的心跳时&am…

sunrays-framework配置重构

文章目录 1.common-log4j2-starter1.目录结构2.Log4j2Properties.java 新增两个属性3.Log4j2AutoConfiguration.java 条件注入LogAspect4.ApplicationEnvironmentPreparedListener.java 从Log4j2Properties.java中定义的配置读取信息 2.common-minio-starter1.MinioProperties.…

相互作用感知的蛋白-小分子对接模型 - Interformer 评测

Interformer 是一个应用于分子对接和亲和力预测的深度学习模型&#xff0c;基于 Graph-Transdormer 架构的模型&#xff0c;利用相互作用&#xff08;氢键、疏水&#xff09;感知的混合密度网络&#xff08;interaction-aware mixture den sity network&#xff0c; MDN&#x…

Ceisum无人机巡检直播视频投射

接上次的视频投影&#xff0c;Leader告诉我这个视频投影要用在两个地方&#xff0c;一个是我原先写的轨迹回放那里&#xff0c;另一个在无人机起飞后的地图回显&#xff0c;要实时播放无人机拍摄的视频&#xff0c;还要能转镜头&#xff0c;让我把这个也接一下。 我的天&#x…

【方法论】ChatGPT与DeepSeek的联合应用,提升工作效率的新解决方案

标题&#xff1a;ChatGPT与DeepSeek的联合应用&#xff0c;提升工作效率的新解决方案 【表格】ChatGPT与DeepSeek联合应用流程 阶段工具主要任务优势备注初稿生成ChatGPT基于用户输入生成初步内容高效、快速生成内容&#xff0c;适应多种主题适合生成长篇文章、报告、分析等验…

第29篇:Python开发进阶:数据库操作与ORM

第29篇&#xff1a;数据库操作与ORM 目录 数据库操作概述 什么是数据库数据库管理系统&#xff08;DBMS&#xff09;常见的数据库类型 Python中的数据库操作 使用sqlite3模块连接到MySQL数据库连接到PostgreSQL数据库 SQL基础 数据库基本操作表的创建与管理数据的插入、查询、…

庆祝2025到来:C++编程的新篇章

作者&#xff1a;w(&#xff9f;Д&#xff9f;)w吓洗宝宝了 发布时间&#xff1a;2025年1月19日00:00 引言 新年伊始&#xff0c;万象更新。在这充满希望的2025年&#xff0c;我们迎来了新的机遇和挑战。作为C编程爱好者的一员&#xff0c;我感到无比激动和自豪。C作为一种强…