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


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 相关文章推荐
De facto standard 世界上不可思议的事实标准
Aug 29 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
js友好的时间返回函数
Aug 24 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
JS Input里添加小图标的两种方法
Nov 11 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 Javascript
小程序实现单选多选功能
Nov 04 Javascript
vue.js Router中嵌套路由的实用示例
Jun 27 Vue.js
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
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
PHP的Laravel框架中使用AdminLTE模板来编写网站后台界面
2016/03/21 PHP
php数据库操作model类(使用__call方法)
2016/11/16 PHP
PHP实现的自定义数组排序函数与排序类示例
2016/11/18 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
js+css实现超简洁的二级下拉菜单效果代码
2015/09/07 Javascript
TypeScript Type Innference(类型判断)
2016/03/10 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
2020/09/11 Javascript
Python里隐藏的“禅”
2014/06/16 Python
在Linux下调试Python代码的各种方法
2015/04/17 Python
python wxpython 实现界面跳转功能
2019/12/17 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
什么是数组名
2012/05/10 面试题
《雨点儿》教学反思
2014/04/14 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书
python requests模块的使用示例
2021/04/07 Python
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏