微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方API中 wx.chooseImage() 是可以进行图片压缩的,可惜的是不能压缩到指定大小。

实际开发中需求可能是压缩到指定大小:
原生js可以使用canvas来压缩,但由于微信小程序对canvas有封装,使得利用canvas来压缩图片有了一些区别:
直接上代码:


主函数:

以上的三个函数可以写在一个公共的js文件里面 我是写在 common.js中的:
html:

在html中需要添加个canvas标签,一般这个标签不让他出现在页面中,因为它的作用仅仅是压缩图片的工具:
代码在实际项目中使用,能完成压缩图片到指定大小的需求。
微信小程序 上传图片并等比列压缩到指定大小的更多相关文章
- 微信小程序上传图片及本地测试
前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...
- 微信小程序上传图片(附后端代码)
几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...
- (十)微信小程序---上传图片chooseImage
官方文档 示例一 wxml <view bindtap="uploadImage">请上传图片</view> <image wx:for=" ...
- .NET开发微信小程序-上传图片到服务器
1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...
- 微信小程序上传图片,视频及预览
wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...
- 微信小程序上传图片(前端+PHP后端)
一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...
- 微信小程序 - 上传图片(组件)
更新日期: 2019/3/14:首次发布,更新了2018/12/30的UI以及反馈信息获取方式,具体请下载:demo. 2019/3/20:感谢544429676@qq.com指出的现存bug,已修复 ...
- 微信小程序上传图片更新图像
解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...
- 微信小程序上传图片
话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph ...
随机推荐
- int 和String之间的相互转换
int ---> String 1. 和 "" 进行拼接 2. 使用String类中的静态方法valueOf: public static String valueOf(in ...
- Quartz.Net 学习随手记之03 配置文件
第一种方式:直接写入代码中 NameValueCollection properties = new NameValueCollection(); properties["quartz.sc ...
- 自定义string类
#include <iostream> #include <cstring> using namespace std; class String; class Data{ // ...
- SpringCloud学习成长 四 断路器(Hystrix)
在微服务架构中,根据业务来拆分成一个个的服务,服务与服务之间可以相互调用(RPC),在Spring Cloud可以用RestTemplate+Ribbon和Feign来调用.为了保证其高可用,单个服务 ...
- [warn] the "user" directive makes sense only if the master process runs with super-user privileges, ignored in /usr/local/nginx/conf/nginx.conf:1
带有sudo 权限执行就可以了
- Python 练习题总结(待续)
1.编写一个函数,接受一个参数n,n为正整数,左右两种打印方 式.要求数字必须对齐 正三角 倒三角 实现思路: 思路1.一行一行打印,前面追加空格,每一个空格的宽度等于数字字符串的宽度 #正三角打印d ...
- LODOP中纸张高度不定超文本和纯文本对比
关于纸张高度不定的小票打印,建议使用纯文本进行设计,避免纸张高度引起变形,或超文本解析差异造成一些影响:LODOP纸张高度不定的纯文本累计高度 上面的链接的博文里,纯文本可通过间距和高度值累计,得出最 ...
- Python3多重继承排序原理(C3算法)
参考:https://www.jianshu.com/p/c9a0b055947b https://xubiubiu.com/2019/06/10/python-%E6%96%B9%E6%B3%95% ...
- 利用PHP应用程序中的远程文件包含(RFI)并绕过远程URL包含限制
来源:http://www.mannulinux.org/2019/05/exploiting-rfi-in-php-bypass-remote-url-inclusion-restriction.h ...
- iOS-UIScrollView+UIPageControl简单实现
#import "MJViewController.h"#import "RootViewController.h" @interface MJViewCont ...