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


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 相关文章推荐
jquery删除数据记录时的弹出提示效果
May 06 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
微信小程序如何使用globalData的方法
Jun 06 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 Javascript
node.js如何操作MySQL数据库
Oct 29 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
将文件夹压缩成zip文件的php代码
2009/12/14 PHP
PHP操作xml代码
2010/06/17 PHP
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP面向对象自动加载机制原理与用法分析
2016/10/14 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
你的编程语言可以这样做吗?
2006/09/07 Javascript
json简单介绍
2008/06/10 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
使用JS代码实现俄罗斯方块游戏
2018/08/03 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python设计模式之模板方法模式实例详解
2019/01/17 Python
numpy基础教程之np.linalg
2019/02/12 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
python GUI库图形界面开发之PyQt5单行文本框控件QLineEdit详细使用方法与实例
2020/02/27 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
开办大学饮食联盟创业计划书
2014/01/29 职场文书
面试后的英文感谢信
2014/02/01 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
2014购房个人委托书范本
2014/10/12 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang