微信小程序压缩图片

embedded/2025/1/30 23:16:06/

由于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.ppmy.cn/embedded/158182.html

相关文章

使用vscode + Roo Code (prev. Roo Cline)+DeepSeek-R1使用一句话需求做了个实验

摘要 使用vscode、Roo Code和deepseek-reasoner进行了一个实验&#xff0c;尝试使用一句话需求来生成小红书封面图片。工具根据需求提供了详细的架构方案&#xff0c;包括技术栈选择、核心模块划分、目录结构建议等。然后&#xff0c;工具自动化地完成了开发和测试&#xff0c;…

使用scikit-learn实现线性回归对自定义数据集进行拟合

1. 引入必要的库 首先&#xff0c;需要引入必要的库。scikit-learn提供了强大的机器学习工具&#xff0c;pandas和numpy则用于数据处理&#xff0c;matplotlib用于结果的可视化。 import pandas as pd import numpy as np from sklearn.model_selection import train_test_sp…

【蓝桥杯嵌入式入门与进阶】2.与开发板之间破冰:初始开发板和原理图2

个人主页&#xff1a;Icomi 专栏地址&#xff1a;蓝桥杯嵌入式组入门与进阶 大家好&#xff0c;我是一颗米&#xff0c;本篇专栏旨在帮助大家从0开始入门蓝桥杯并且进阶&#xff0c;若对本系列文章感兴趣&#xff0c;欢迎订阅我的专栏&#xff0c;我将持续更新&#xff0c;祝你…

SQL注入漏洞之高阶手法 宽字节注入以及编码解释 以及堆叠注入原理说明

目录 宽字节注入 编码区分 原理 函数 转译符号解释 注意 绕过方式详解 堆叠【Stack】注入攻击 注入语句 宽字节注入 在说宽字节注入之前 我们需要知道编码相关的知识点&#xff0c;这个有助于搞定什么是宽字节注入 分清楚是ascii码是什么宽字节注入代码里面加入了adds…

【2025最新计算机毕业设计】基于SpringBoot+Vue爬虫技术的咖啡与茶饮料文化平台(高质量源码,可定制,提供文档,免费部署到本地)

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

单链表专题(上)

链表的定义与创建 线性表&#xff1a; 1. 物理结构上不一定是线性的 2. 逻辑结构上一定是线性的 链表是一种物理存储结构上非连续&#xff0c;非顺序的存储结构 链表也是线性表的一种&#xff0c;但是在物理结构上不是连续的 链表是由一个一个的节点组成&#xff0c;需要数…

【C语言----数组详解】

目录 ---------------------------------------begin--------------------------------------- 一、什么是数组 二、数组的声明和初始化 1. 数组的声明 2. 数组的初始化 三、数组元素的访问 四、数组的遍历 五、数组的应用 六、多维数组 七、总结 --------------------…

单片机-STM32 IIC通信(OLED屏幕)(十一)

一、屏幕的分类 1、LED屏幕&#xff1a; 由无数个发光的LED灯珠按照一定的顺序排列而成&#xff0c;当需要显示内容的时候&#xff0c;点亮相关的LED灯即可&#xff0c;市场占有率很高&#xff0c;主要是用于户外&#xff0c;广告屏幕&#xff0c;成本低。 LED屏是一种用发光…