当前位置: 首页 > news >正文

微信小程序利用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})},

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 【人工智能】AI算法系统设计与算法建模的详细阐述
  • leetcode 1957 删除字符使字符串变好
  • 【ubuntu20.4 常用经验分享】
  • [RIS]GRES: Generalized Referring Expression Segmentation
  • JAVA中如何使用反射获取数组元素类型
  • [论文笔记] megatron 大模型超参搜索pipeline
  • 【练习】哈希表的使用
  • Python切片技巧,带你轻松提取数组子集!
  • NeRF笔记
  • SpringBoot 基于iText 根据PDF模板动态生成文件
  • OSError: [E050] Can‘t find model ‘en_core_web_sm‘.
  • Python爬虫(一文通)
  • OverflowError: cannot convert float infinity to integer
  • Golang使用Quic-Go开源库实现Quic客户端和服务端
  • 企业数据治理之主数据---供应商主数据
  • Google 是如何开发 Web 框架的
  • 《Java8实战》-第四章读书笔记(引入流Stream)
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • Angular6错误 Service: No provider for Renderer2
  • css选择器
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • Java,console输出实时的转向GUI textbox
  • vue-cli在webpack的配置文件探究
  • vuex 学习笔记 01
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 代理模式
  • 工作中总结前端开发流程--vue项目
  • 关于List、List?、ListObject的区别
  • 极限编程 (Extreme Programming) - 发布计划 (Release Planning)
  • 适配iPhoneX、iPhoneXs、iPhoneXs Max、iPhoneXr 屏幕尺寸及安全区域
  • 数据结构java版之冒泡排序及优化
  • 数组大概知多少
  • 小程序开发之路(一)
  • 新手搭建网站的主要流程
  • 阿里云移动端播放器高级功能介绍
  • ### Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLTr
  • #ubuntu# #git# repository git config --global --add safe.directory
  • #我与Java虚拟机的故事#连载13:有这本书就够了
  • (1)Nginx简介和安装教程
  • (16)UiBot:智能化软件机器人(以头歌抓取课程数据为例)
  • (21)起落架/可伸缩相机支架
  • (51单片机)第五章-A/D和D/A工作原理-A/D
  • (AngularJS)Angular 控制器之间通信初探
  • (C语言)求出1,2,5三个数不同个数组合为100的组合个数
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第6节 (嵌套的Finally代码块)
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (超详细)2-YOLOV5改进-添加SimAM注意力机制
  • (二)linux使用docker容器运行mysql
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (三)mysql_MYSQL(三)
  • (实战)静默dbca安装创建数据库 --参数说明+举例
  • (算法)N皇后问题
  • (详细版)Vary: Scaling up the Vision Vocabulary for Large Vision-Language Models
  • (一)基于IDEA的JAVA基础1
  • (原创)Stanford Machine Learning (by Andrew NG) --- (week 9) Anomaly DetectionRecommender Systems...