微信小程序上传图片并等比列压缩到指定大小的实例代码


Posted in Javascript onOctober 24, 2019

微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小。

微信小程序上传图片并等比列压缩到指定大小的实例代码

实际开发中需求可能是压缩到指定大小:

原生js可以使用canvas来压缩,但由于微信小程序对canvas有封装,使得利用canvas来压缩图片有了一些区别:

代码放在了git:https://github.com/jonyellow/code-diary/tree/master/%E5%B0%8F%E7%A8%8B%E5%BA%8F/%E5%9B%BE%E7%89%87%E5%8E%8B%E7%BC%A9

直接上代码:

微信小程序上传图片并等比列压缩到指定大小的实例代码

微信小程序上传图片并等比列压缩到指定大小的实例代码

主函数:

微信小程序上传图片并等比列压缩到指定大小的实例代码

以上的三个函数可以写在一个公共的js文件里面 我是写在 common.js中的:

html:

微信小程序上传图片并等比列压缩到指定大小的实例代码

在html中需要添加个canvas标签,一般这个标签不让他出现在页面中,因为它的作用仅仅是压缩图片的工具:

<canvas class="canvas" canvas-id="canvas" :style="{width:cWidth+'px',height:cHeight+'px', visibility: 'hidden', 'position':'absolute', 'z-index': '-1', left: '-10000rpx',top:'-10000rpx'}"></canvas>

在methods中增加chooseImg方法:

微信小程序上传图片并等比列压缩到指定大小的实例代码

代码在实际项目中使用,能完成压缩图片到指定大小的需求。

总结

以上所述是小编给大家介绍的微信小程序上传图片并等比列压缩到指定大小的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
基于JQuery的简单实现折叠菜单代码
Sep 15 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
原生JS实现LOADING效果
Mar 16 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
jQuery的$.extend 浅拷贝与深拷贝
Mar 08 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
Feb 05 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 #Javascript
Vue 3.0双向绑定原理的实现方法
Oct 23 #Javascript
JavaScript判断数组类型的方法
Oct 23 #Javascript
Vue 2.0双向绑定原理的实现方法
Oct 23 #Javascript
p5.js绘制旋转的正方形
Oct 23 #Javascript
p5.js实现简单货车运动动画
Oct 23 #Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 #Javascript
You might like
PHP实现的博客欢迎提示功能(很特别哦)
2014/06/05 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
javascript 无提示关闭窗口脚本
2009/08/17 Javascript
javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同
2010/06/25 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
JavaScript微信定位功能实现方法
2016/11/29 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
2017/11/28 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JavaScript函数apply()和call()用法与异同分析
2018/08/10 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
layui递归实现动态左侧菜单
2019/07/26 Javascript
Python正则表达式介绍
2012/08/06 Python
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
bat和python批量重命名文件的实现代码
2016/05/19 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
python实现微信自动回复功能
2018/04/11 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python 字符串池化的前提
2020/07/03 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
python推导式的使用方法实例
2021/02/28 Python
时尚圣经:The Fashion Bible
2019/03/03 全球购物
银行爱岗敬业演讲稿
2014/05/05 职场文书
学校宣传标语
2014/06/18 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android