微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方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 ...
随机推荐
- PS 实用技巧
1. 调整大小 ctrl + T 2. 导出透明背景图片 选择 png格式
- .The server quit without updating PID file (/var/lib/mysql/pc.pid).
启动Mysql是报错 [root@pc mysql]# mysql startERROR 2002 (HY000): Can't connect to local MySQL server throu ...
- OLE导出EXCEL 问题处理
需求: 2.资产负债表.利润表导出优化,由于项目公司门店较多,需要增加批量导出功能.按纳税主体维度导出execl文件,输入了几个纳税主体,就生成几个execl文件. 实现: 用程序ZFIR0014XL ...
- HmacSHA256算法(C# 和 Java)
Java代码: /** * HmacSHA256算法,返回的结果始终是32位 * @param key 加密的键,可以是任何数据 * @param content 待加密的内容 * @return 加 ...
- java8中计算两个日期时间LocalDateTime的时间差,格式化成xx年yy月zz日aa时bb分cc秒
原则上应该适用Period来计算,因为他是专门为这种需求设计的.当时他只能计算到两个时间差的,年月日 传入参数Period.between(LocalDate,LocalDate) 这里是计算两个Lo ...
- python2.6.6升级python2.7.14
Centos 6.8系统镜像默认安装的 python 环境是 2.6.6,线上需求需要升级到 2.7.14 版本,网上找了相关资料,升级 python 版本比较容易,但 yum/pip 等命令的使用也 ...
- react 组装table列表带分页
2.组装编辑界面 /** * Created by hldev on 17-6-14. */ import React, {Component} from "react"; imp ...
- Spring 使用jsp
1.New----新建项目 2.选择图中所示按钮,下一步 3.标记处修改工程名,下一步 4选中图中所示选项 5.完成 6.在main目录下新建目录webapp 7.自动导入 8.调整项目结构 9.选择 ...
- mysql学习之join从句
一.join从句共有5种类型 内连接(inner join) 全外连接(full outer join) 左外连接(left outer join) 右外连接(right outer join) 交叉 ...
- jqGrid全部选中
var jqGrid = $("#jqGrid"); // 拿到所有行id var jqGridIDs = jqGrid.getDataIDs(); // 拿到所有选中行id va ...