微信小程序官方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. osg HUD 背景图片设置

    #ifdef _WIN32 #include <Windows.h> #endif // _WIN32 #include<iostream> #include <osgV ...

  2. 一种可以避免数据迁移的分库分表scale-out扩容模式

    转自: http://jm.taobao.org/ 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星 ...

  3. TrippleDESCSPEncrypt 加密解密试试看

    public class TrippleDESCSPEncrypt { //12个字符 private static string customIV = "4vHKRj3yfzU=" ...

  4. jquery iframe取得元素与自适应高度

    总结一下iframe在jquery中怎么操作的,下面我来给各位介绍jquery 获取iframe子/父页面的元素及iframe在jquery高度自适应实现方法,各位朋友可参考. jquery方法: 在 ...

  5. js实现随机数及随机数组

    js数组元素的随机调用 工作中网页填充数据时需要一个短语库,来拼接在短语句子后边.那就写一个js吧,放在input的keydown或keyup里边用喽. 贴代码: <SCRIPT LANGUAG ...

  6. [学习笔记] Blender 常用工具栏,选择及游标

    Shift + A 创建物体 选择工具: 默认是框选 shift 鼠标左键 加选, 再次可减选 游标 默认情况下游标在世界中心.创建新物体时,会自动被创建在游标的位置.可以随意改变游标的位置,便于建模 ...

  7. zabbix 部署包安装

      关于zabbix的安装方式,官网提供了几种方法,分别是:部署包安装.源码安装.容器安装.容器安装我之前已经写过一篇,而现在这一篇是关于部署包安装的.   按照官网的说法,我们需要如下几个步骤:   ...

  8. python 在工程中处理相对路径的思考

    首先就是 工程中的目录非常多.不能使用绝对路径. 只能使用相对路径. 我工程的目录: root_dir = os.path.dirname(os.path.abspath('.')) ## 获取相对目 ...

  9. hadoop在eclipse当中如何添加源码?

    [学习笔记] /*org.apache.hadoop.mapreduce.Mapper.Context,java.lang.InterruptedException,想看map的源代码,按contro ...

  10. java输入输出 -- java NIO之文件通道

    一.简介 通道是 Java NIO 的核心内容之一,在使用上,通道需和缓存类(ByteBuffer)配合完成读写等操作.与传统的流式 IO 中数据单向流动不同,通道中的数据可以双向流动.通道既可以读, ...