微信小程序官方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" :style="{width:cWidth+'px',height:cHeight+'px', visibility: 'hidden', 'position':'absolute', 'z-index': '-1', left: '-10000rpx',top:'-10000rpx'}"></canvas>
 
在methods中增加chooseImg方法:

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

 

微信小程序 上传图片并等比列压缩到指定大小的更多相关文章

  1. 微信小程序上传图片及本地测试

    前端(.wxml) <view id="view1"> <view id="btns"> <image id="ima1 ...

  2. 微信小程序上传图片(附后端代码)

    几乎每个程序都需要用到图片. 在小程序中我们可以通过image组件显示图片. 当然小程序也是可以上传图片的,微信小程序文档也写的很清楚. 上传图片 首先选择图片 通过wx.chooseImage(OB ...

  3. (十)微信小程序---上传图片chooseImage

    官方文档 示例一 wxml <view bindtap="uploadImage">请上传图片</view> <image wx:for=" ...

  4. .NET开发微信小程序-上传图片到服务器

    1.上传图片分为几种: a:上传图片到本地(永久保存) b:上传图片到本地(临时保存) c:上传图片到服务器 a和b在小程序的api文档里面有.直接说C:上传图片到服务器 前端代码: /* 上传图片到 ...

  5. 微信小程序上传图片,视频及预览

    wxml <!-- 图片预览 --> <view class='preview-warp' wx:if="{{urls}}"> <image src= ...

  6. 微信小程序上传图片(前端+PHP后端)

    一.wxml文件 <text>上传图片</text> <view> <button bindtap="uploadimg">点击选择 ...

  7. 微信小程序 - 上传图片(组件)

    更新日期: 2019/3/14:首次发布,更新了2018/12/30的UI以及反馈信息获取方式,具体请下载:demo. 2019/3/20:感谢544429676@qq.com指出的现存bug,已修复 ...

  8. 微信小程序上传图片更新图像

    解决思路: 1. 调用wx.chooseImage 选择图片 2.wx.uploadFile 上传图片 3.调用后台接口进行修改操作 修改原来的头像 wx.chooseImage({ success: ...

  9. 微信小程序上传图片

    话不多说,直接上码. <view class="section"> <!--放一张图片或按钮 点击时去选择图片--> <image class='ph ...

随机推荐

  1. Ionic4.x Javascript 扩展 ActionSheet Alert Toast Loading 以及 ionic 手势相 关事件

    1.ActionSheet 官方文档:https://ionicframework.com/docs/api/action-sheet <ion-header> <ion-toolb ...

  2. MERN——MongoDB && React && Node && Express

    原文链接:Let’s build a full stack MongoDB, React, Node and Express (MERN) app github源码地址:jelorivera08/re ...

  3. markdown 测试博客发布

    这是一个测试页面 无序列表 tet test 有序列表 特使团 tetst 引用 This is a test 插入图片 插入链接 baidu 粗体 这是粗体 斜体 这是斜体 表格 IP VIP 备注 ...

  4. thymeleaf中double/float格式化,四舍五入显示两位小数

    private Float balance; 代码: <span class="A124_balance_num" th:text="${#numbers.form ...

  5. navigationBarTitleText

    想修改整个程序的导航栏,在app.json 文件 修改 "window": { "backgroundTextStyle": "light" ...

  6. thinkphp5 引用 phpass加密算法

    引入phpass thinkPHP5 放到扩展目录里 自动加载配置 直接实例化 // 初始化散列器为不可移植(这样更安全) $PasswordHashs = new \PasswordHashs(8, ...

  7. yml 文件中使用环境变量

    Spring Boot 中可以用 spring.profiles.active 参数来指定系统环境,让系统加载不同的配置文件. 可以在程序启动的时候加上参数来指定需要的配置 java -Dspring ...

  8. web平台大数据请求传输性能处理

    在XMLHttpRequest请求中使用ArrayBuffer方式,和后端服务器进行二进制的传输交互. 在项目中发现随着用户增长,部分前端功能,请求的数据量越来越大,传统的josn的方式,在下载.序列 ...

  9. [转帖]Linux命令pmap

    Linux命令pmap https://www.cnblogs.com/lnlvinso/p/5272771.html jmap可以查看Java程序的堆内存使用情况,pmap可以查看Linux上运行的 ...

  10. 值得收藏的Python第三方库

    网络站点爬取 爬取网络站点的库Scrapy – 一个快速高级的屏幕爬取及网页采集框架.cola – 一个分布式爬虫框架.Demiurge – 基于PyQuery 的爬虫微型框架.feedparser ...