微信小程序上传图片并等比列压缩到指定大小的实例代码
更新时间：2019年10月24日 08:48:20 作者：骑摩托敲代码
这篇文章主要介绍了微信小程序 上传图片并等比列压缩到指定大小，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的，可惜的是不能压缩到指定大小。
实际开发中需求可能是压缩到指定大小：
原生js可以使用canvas来压缩，但由于微信小程序对canvas有封装，使得利用canvas来压缩图片有了一些区别：
直接上代码：
主函数：
以上的三个函数可以写在一个公共的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方法：
代码在实际项目中使用，能完成压缩图片到指定大小的需求。
总结
以上所述是小编给大家介绍的微信小程序上传图片并等比列压缩到指定大小的实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
这篇文章主要介绍了JS条形码(一维码)插件JsBarcode用法,较为详细的分析了条形码插件JsBarcode编码类型、参数、属性等相关功能、使用方法与注意事项,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了如何利用JavaScript实现简单的3D立方体自动旋转的效果，文中的实现代码讲解详细，感兴趣的可以尝试一下2022-06-06
React Native JSI实现RN与原生通信的示例代码
本文主要介绍了React Native JSI实现RN与原生通信的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
深夜没睡着，起来翻了翻《JavaScript权威指南》这本书，看了下图形动画的demo，学习学习了2012-05-05
这篇文章主要介绍了js实现一个链接打开两个链接地址的方法,可实现连续打开两个链接的功能,非常简单实用的技巧,需要的朋友可以参考下2015-05-05
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)
这篇文章主要介绍了JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法,结合实例形式分析了javascript函数式编程中箭头函数相关概念、原理、用法及操作注意事项,需要的朋友可以参考下2019-05-05
下面小编就为大家分享一篇js 判断一个数字是不是2的n次方幂的实例，具有很好的参考价值，希望对大家有所帮助2017-11-11
这篇文章主要介绍了JS实现为排序好的字符串找出重复行的方法,涉及JavaScript字符串运算相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-03-03
这篇文章主要介绍了js获取video任意时间的画面截图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
js变量作用域及可访问性的探讨...2006-11-11
最新评论