温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-09-26 14:01:06 来源:脚本之家 阅读:570 作者:骑摩托敲代码 栏目:web开发

微信小程序官方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" :></canvas>

在methods中增加chooseImg方法:

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

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

总结

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

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI