微信小程序利用canva进行大图片压缩

2024-08-29 17:44

本文主要是介绍微信小程序利用canva进行大图片压缩,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

找了很多方法没找到合适的图片压缩第三方库,有没有推荐的微信小程序压缩图片的第三方库呀(有的话,互帮互助,感谢)

我自己写了个简易的压缩方法,其实就是等比例的缩小图片,并把png转为jpg,毕竟png的颜色太多。

wxml:

<canvas canvas-id="canvas" class="my-canvas" style="width:{{cWidth}}px;height:{{cHeight}}px">
</canvas>

js:

 canvasCompress(obj, n) {let {tempFiles} = this.datalet _this = thisreturn new Promise((resolve, reject) => {let canvasWidth = obj.params.widthlet canvasHeight = obj.params.heightconsole.log(canvasWidth);let quality = 0.8if (canvasWidth > 750) {canvasWidth = 750canvasHeight = Math.trunc(obj.params.height * 750 / obj.params.width)quality = 0.5} else if (canvasWidth > 400 && canvasWidth < 749) {canvasWidth = 400canvasHeight = Math.trunc(obj.params.height * 400 / obj.params.width)quality = 0.6}this.setData({cWidth: canvasWidth,cHeight: canvasHeight})let ctx = wx.createCanvasContext('canvas')ctx.clearRect(0, 0, canvasWidth, canvasHeight);ctx.drawImage(tempFiles[n].tempFilePath, 0, 0, canvasWidth, canvasHeight)ctx.draw(false, _this.timer = setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'canvas',destWidth: canvasWidth, // 输出图片的宽度destHeight: canvasHeight, // 输出图片的高度fileType: 'jpg', // 图片输出格式quality: 0.5, // 图片质量 0-1success: function (res) {clearTimeout(_this.timer)resolve(res.tempFilePath);},fail: function (res) {clearTimeout(_this.timer)reject(err.errMsg)}})}, 600)) //留一定的时间绘制canvas})},

这篇关于微信小程序利用canva进行大图片压缩的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1118532

相关文章

C#实现添加/替换/提取或删除Excel中的图片

《C#实现添加/替换/提取或删除Excel中的图片》在Excel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更加美观,下面我们来看看如何在C#中实现添加/替换/提取或删除E... 在Excandroidel中插入与数据相关的图片,能将关键数据或信息以更直观的方式呈现出来,使文档更

使用MongoDB进行数据存储的操作流程

《使用MongoDB进行数据存储的操作流程》在现代应用开发中,数据存储是一个至关重要的部分,随着数据量的增大和复杂性的增加,传统的关系型数据库有时难以应对高并发和大数据量的处理需求,MongoDB作为... 目录什么是MongoDB?MongoDB的优势使用MongoDB进行数据存储1. 安装MongoDB

Linux使用fdisk进行磁盘的相关操作

《Linux使用fdisk进行磁盘的相关操作》fdisk命令是Linux中用于管理磁盘分区的强大文本实用程序,这篇文章主要为大家详细介绍了如何使用fdisk进行磁盘的相关操作,需要的可以了解下... 目录简介基本语法示例用法列出所有分区查看指定磁盘的区分管理指定的磁盘进入交互式模式创建一个新的分区删除一个存

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

使用Python进行文件读写操作的基本方法

《使用Python进行文件读写操作的基本方法》今天的内容来介绍Python中进行文件读写操作的方法,这在学习Python时是必不可少的技术点,希望可以帮助到正在学习python的小伙伴,以下是Pyth... 目录一、文件读取:二、文件写入:三、文件追加:四、文件读写的二进制模式:五、使用 json 模块读写

C#中图片如何自适应pictureBox大小

《C#中图片如何自适应pictureBox大小》文章描述了如何在C#中实现图片自适应pictureBox大小,并展示修改前后的效果,修改步骤包括两步,作者分享了个人经验,希望对大家有所帮助... 目录C#图片自适应pictureBox大小编程修改步骤总结C#图片自适应pictureBox大小上图中“z轴

使用zabbix进行监控网络设备流量

《使用zabbix进行监控网络设备流量》这篇文章主要为大家详细介绍了如何使用zabbix进行监控网络设备流量,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录安装zabbix配置ENSP环境配置zabbix实行监控交换机测试一台liunx服务器,这里使用的为Ubuntu22.04(

使用Python将长图片分割为若干张小图片

《使用Python将长图片分割为若干张小图片》这篇文章主要为大家详细介绍了如何使用Python将长图片分割为若干张小图片,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. python需求的任务2. Python代码的实现3. 代码修改的位置4. 运行结果1. Python需求

在Pandas中进行数据重命名的方法示例

《在Pandas中进行数据重命名的方法示例》Pandas作为Python中最流行的数据处理库,提供了强大的数据操作功能,其中数据重命名是常见且基础的操作之一,本文将通过简洁明了的讲解和丰富的代码示例,... 目录一、引言二、Pandas rename方法简介三、列名重命名3.1 使用字典进行列名重命名3.编

python安装完成后可以进行的后续步骤和注意事项小结

《python安装完成后可以进行的后续步骤和注意事项小结》本文详细介绍了安装Python3后的后续步骤,包括验证安装、配置环境、安装包、创建和运行脚本,以及使用虚拟环境,还强调了注意事项,如系统更新、... 目录验证安装配置环境(可选)安装python包创建和运行Python脚本虚拟环境(可选)注意事项安装