微信小程序 上传图片并等比列压缩到指定大小
微信小程序官方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 ...
随机推荐
- ColorMatrix图片饱和度设置
package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...
- 目标检测中的选择性搜索-selective search-没弄
https://blog.csdn.net/small_munich/article/details/79595257 https://www.cnblogs.com/zyly/p/9259392.h ...
- 123457---脑筋急转弯01--com.threeObj03.JiZhuanWan
脑筋急转弯01--com.threeObj03.JiZhuanWan
- 【设计】PC Web端框架组件
https://uedart.com/demo/templatesWebKit/index.html#g=1&p=%E4%BD%9C%E5%93%81%E9%A6%96%E9%A1%B5 移动 ...
- Page.ClientScript、ClientScript、ScriptManager、ClientScriptManager等的详细解说
在 .aspx.cs页面中,输入这四个东西:Page.ClientScript.ClientScript.ScriptManager.ClientScriptManager,均会出提示,表示它们均可用 ...
- maven执行过程中抛出的各类异常信息
价值 各类异常信息分类 举例 maven源代码的模块maven-core里的各类*Exception命名的class包含里,maven执行过程中打印的各类异常日志内容 比如如下错误 错误信息分别来自( ...
- .Net Core 3.0 关于Windows Form和WPF的全面支持
引言 ".NET 核心是开源和跨平台.您可以使用 .NET Core 在 Windows.Mac.十几个 Linux.iPhone.IoT 设备等上运行服务器应用程序! .NET 酷睿是开源 ...
- Egret入门学习日记 --- 第十七篇(书中 7.4~8.2节 内容)
第十七篇(书中 7.4~8.2节 内容) 昨天看到 7.3 节,那么今天. 开始 7.4节. 好吧,这些其他的服务器运行知识,就不搞了... 至此,7.4节 内容结束. 开始 7.5节 内容. ...
- vue警告: component lists rendered with v-for should have explicit keys
warning信息:component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide ...
- async/await小知识点
一.使用async修饰的函数,返回的内容就是一个Promise,因此可以使用Promise对象所有的方法,如then等 二.在async函数中使用await是否会影响其他代码的执行,答案是:不会.