微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方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 ...
随机推荐
- Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件
1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolb ...
- MERN——MongoDB && React && Node && Express
原文链接:Let’s build a full stack MongoDB, React, Node and Express (MERN) app github源码地址:jelorivera08/re ...
- markdown 测试博客发布
这是一个测试页面 无序列表 tet test 有序列表 特使团 tetst 引用 This is a test 插入图片 插入链接 baidu 粗体 这是粗体 斜体 这是斜体 表格 IP VIP 备注 ...
- thymeleaf中double/float格式化,四舍五入显示两位小数
private Float balance; 代码: <span class="A124_balance_num" th:text="${#numbers.form ...
- navigationBarTitleText
想修改整个程序的导航栏,在app.json 文件 修改 "window": { "backgroundTextStyle": "light" ...
- thinkphp5 引用 phpass加密算法
引入phpass thinkPHP5 放到扩展目录里 自动加载配置 直接实例化 // 初始化散列器为不可移植(这样更安全) $PasswordHashs = new \PasswordHashs(8, ...
- yml 文件中使用环境变量
Spring Boot 中可以用 spring.profiles.active 参数来指定系统环境,让系统加载不同的配置文件. 可以在程序启动的时候加上参数来指定需要的配置 java -Dspring ...
- web平台大数据请求传输性能处理
在XMLHttpRequest请求中使用ArrayBuffer方式,和后端服务器进行二进制的传输交互. 在项目中发现随着用户增长,部分前端功能,请求的数据量越来越大,传统的josn的方式,在下载.序列 ...
- [转帖]Linux命令pmap
Linux命令pmap https://www.cnblogs.com/lnlvinso/p/5272771.html jmap可以查看Java程序的堆内存使用情况,pmap可以查看Linux上运行的 ...
- 值得收藏的Python第三方库
网络站点爬取 爬取网络站点的库Scrapy – 一个快速高级的屏幕爬取及网页采集框架.cola – 一个分布式爬虫框架.Demiurge – 基于PyQuery 的爬虫微型框架.feedparser ...