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


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 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
两个Javascript小tip资料
Nov 23 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 Javascript
解决AngualrJS页面刷新导致异常显示问题
Apr 20 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
JS函数本身的作用域实例分析
Mar 16 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实现图片局部打马赛克的方法
2015/02/11 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
PHP 7.1中AES加解密方法mcrypt_module_open()的替换方案
2017/10/17 PHP
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
jQuery-serialize()输出序列化form表单值的方法
2012/12/26 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
2016/11/03 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
详解vue-cli中配置sass
2017/06/21 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
详解Vue2.0组件的继承与扩展
2018/11/23 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
2019/09/26 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
大学教师年终总结的自我评价
2013/10/29 职场文书
教师申诉制度
2014/01/29 职场文书
物流专业自荐信
2014/05/23 职场文书
小学清明节活动总结
2014/07/04 职场文书
青年志愿者活动方案
2014/08/17 职场文书
导游词之包公祠
2019/11/25 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
Sql Server之数据类型详解
2022/02/28 SQL Server