微信小程序压缩图片

由于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.rhkb.cn/news/6408.html

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

相关文章

UDP 广播组播点播的区别及联系

1、网络IP地址的分类 组播地址是分类编址的IPv4地址中的D类地址&#xff0c;又叫多播地址&#xff0c;他的前四位必须是1110&#xff0c;所以网络地址的二进制取值范围是11100000~11101111对应的十进制为 224~~239。所以以224~239开头的网络地址都是组播地址。 组播地址的功能…

mysql 学习2 MYSQL数据模型,mysql内部可以创建多个数据库,一个数据库中有多个表;表是真正放数据的地方,关系型数据库 。

在第一章中安装 &#xff0c;启动mysql80 服务后&#xff0c;连接上了mysql&#xff0c;那么就要 使用 SQL语句来 操作mysql数据库了。那么在学习 SQL语言操作 mysql 数据库 之前&#xff0c;要对于 mysql数据模型有一个了解。 MYSQL数据模型 在下图中 客户端 将 SQL语言&…

10个非常基础的 Javascript 问题

Javascript是一种用于Web开发的编程语言。JavaScript在网络的客户端上运行。 根据MDN&#xff0c;JavaScript&#xff08;通常缩写为JS&#xff09;是一种轻量级的&#xff0c;解释性的&#xff0c;面向对象的语言&#xff0c;具有一流的功能&#xff0c;并且最著名的是Web页面…

把 PVE 下的机械硬盘(非SSD系统盘)分配给虚拟机使用

PVE 挂在硬盘 参考 Ubuntu 24.04 LTS 空闲硬盘挂载到 文件管理器的 other locations。 在 PVE shell 中根据上面教程挂在硬盘 新建分享目录 参考 Proxmox VE&#xff08;PVE&#xff09;添加硬盘做存储 虚拟机新增硬盘 虚拟机 关机&#xff0c;按下图新增硬盘 新增硬盘…

制作动态菜单

动态菜单的说明 什么叫做动态菜单&#xff1f;动态菜单就是根据用户属于不同的角色&#xff0c;每个角色还有不同的菜单&#xff0c;左侧菜单栏会有不同的显示 前端加载流程 menu.js 修改/src/api/menu.js中的请求地址&#xff0c;如下所示&#xff1a; // 获取菜单 export…

C语言数组详解:从基础到进阶的全面解析

在C语言中&#xff0c;数组是一种基本的数据结构&#xff0c;用于存储多个相同类型的数据。数组的引入使得C语言能够高效地存储和操作大量数据。在任何一个C语言程序中&#xff0c;数组都发挥着极其重要的作用。无论是在算法实现、数据存储、还是在复杂程序的设计中&#xff0c…

什么是COLLATE排序规则?

在当今数字化世界中&#xff0c;数据的整理、比较和排序是至关重要的。在数据库管理和编程语言中&#xff0c;我们经常需要对字符串进行排序&#xff0c;以展示或处理信息。为了实现这一点&#xff0c;各种系统和工具提供了排序规则&#xff0c;其中COLLATE排序规则就是其中的一…

【数据结构进阶】红黑树超详解 + 实现(附源码)

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;数据结构 目录 前言 一、红黑树介绍 二、红黑树原理详解 三、红黑树的实现 1. 节点定义 2. 红黑树类型定义及接口声明 3. 红黑树的插入&#xff08;重点&a…

计算机网络 (57)改进“尽最大努力交付”的服务

前言 计算机网络中的“尽最大努力交付”服务是网络层的一种数据传输方式。这种服务的特点是网络层只负责尽力将数据报从源端传输到目的端&#xff0c;而不保证数据传输的可靠性。 一、标记与分类 为数据分组打上标记&#xff1a; 给不同性质的分组打上不同的标记&#x…

ThinkPHP 8模型与数据的插入、更新、删除

【图书介绍】《ThinkPHP 8高效构建Web应用》-CSDN博客 《2025新书 ThinkPHP 8高效构建Web应用 编程与应用开发丛书 夏磊 清华大学出版社教材书籍 9787302678236 ThinkPHP 8高效构建Web应用》【摘要 书评 试读】- 京东图书 使用VS Code开发ThinkPHP项目-CSDN博客 编程与应用开…

【数据可视化】全国星巴克门店可视化

&#x1f9d1; 博主简介&#xff1a;曾任某智慧城市类企业算法总监&#xff0c;目前在美国市场的物流公司从事高级算法工程师一职&#xff0c;深耕人工智能领域&#xff0c;精通python数据挖掘、可视化、机器学习等&#xff0c;发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…

密码无关认证:金融机构如何解决密码问题

密码安全问题&#xff0c;依然是金融行业面临的重大挑战。尽管密码简单易用&#xff0c;但许多金融机构仍然依赖这种方式进行身份认证。幸运的是&#xff0c;随着技术的发展&#xff0c;密码无关认证已经成为一种更加安全、便捷的选择&#xff0c;它能够为数字银行带来更好的用…

【Redis】持久化机制

目录 前言&#xff1a; RDB 触发RDB持久化方法有俩种&#xff1a; 1.手动触发 2.自动触发 RDB文件的优缺点&#xff1a; AOF: AOF工作机制&#xff1a;​编辑 ​编辑重写机制&#xff1a; 前言&#xff1a; Redis是一个内存数据库&#xff0c;将数据存储在内存中&…

Vue基础(2)

19、组件之间传递数据 组件与组件之间不是完全独立的&#xff0c;而是有交集的&#xff0c;那就是组件与组 件之间是可以传递数据的 传递数据的解决方案就是 props ComponentA.vue <template><!-- 使用ComponentB组件&#xff0c;并传递title属性 --><h3>…

Java操作Excel导入导出——POI、Hutool、EasyExcel

目录 一、POI导入导出 1.数据库导出为Excel文件 2.将Excel文件导入到数据库中 二、Hutool导入导出 1.数据库导出为Excel文件——属性名是列名 2.数据库导出为Excel文件——列名起别名 3.从Excel文件导入数据到数据库——属性名是列名 4.从Excel文件导入数据到数据库…

08-ArcGIS For JavaScript-通过Mesh绘制几何体(Cylinder,Circle,Box,Pyramid)

目录 概述代码实现1、Mesh.createBox2、createPyramid3、Mesh.createSphere4、Mesh.createCylinder 完整代码 概述 对于三维场景而言&#xff0c;二位的点、线、面&#xff0c;三维的圆、立方体、圆柱等都是比较常见的三维对象&#xff0c;在ArcGIS For JavaScript中我们知道点…

DAY6,使用互斥锁 和 信号量分别实现5个线程之间的同步

题目 请使用互斥锁 和 信号量分别实现5个线程之间的同步 代码&#xff1a;信号量实现 void* task1(void* arg); void* task2(void* arg); void* task3(void* arg); void* task4(void* arg); void* task5(void* arg);sem_t sem[5]; //信号量变量int main(int argc, const …

19_PlayerPres持久化_创建角色窗口

创建脚本 编写脚本 using UnityEngine; //功能 : 角色创建界面 public class CreateWnd : WindowsRoot{protected override void InitWnd(){base.InitWnd();//TODO//显示一个随机名字} }创建角色窗口CreateWnd.cs应该在玩家点击 进入游戏 按钮后显示 所以在 登录窗口LoginWnd…

热更新杂乱记

热更新主要有一个文件的MD5值的比对过程&#xff0c;期间遇到2个问题&#xff0c;解决起来花费了一点时间 1. png 和 plist 生成zip的时候再生成MD5值会发生变动。 这个问题解决起来有2种方案&#xff1a; &#xff08;1&#xff09;.第一个方案是将 png和plist的文件时间改…

【2024年华为OD机试】 (C卷,100分)- 用户调度问题(JavaScriptJava PythonC/C++)

一、问题描述 问题描述 在通信系统中&#xff0c;有 n 个待串行调度的用户&#xff0c;每个用户可以选择 A、B、C 三种调度策略。不同的策略会消耗不同的系统资源。调度规则如下&#xff1a; 相邻用户不能使用相同的调度策略&#xff1a;例如&#xff0c;如果第 1 个用户选择…