微信小程序官方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. angular组件数据和事件

    <h1>引入图片</h1> <img src="assets/images/02.png" alt="收藏" /> < ...

  2. 解压命令unzip常用方法汇总

    解压命令unzip常用方法汇总: 1.把文件解压到当前目录下 1 unzip pythontab.com.zip 2.如果要把文件解压到指定的目录下,需要用到-d参数. 1 unzip -d ./tm ...

  3. python动态赋值-把字符串转为变量名

    可以实现的方法有: globals(),locals(),eval(),exec() 演示: exce法 In [6]: exec('name="bob"') In [7]: na ...

  4. osgText::Text osg字体

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

  5. Qt编写自定义控件56-波浪曲线

    一.前言 波浪曲线控件,其实是之前一个水波进度条控件的一个核心,其实就是利用正弦曲线来生成对应的坐标进行绘制,把这个功能单独提取出来,是为了更详细的研究各种正弦余弦等拓展效果,当时写这个效果的时候,参 ...

  6. Apache配置日志切割

    随着网站的访问越来越大,WebServer产生的日志文件也会越来越大,如果不对日志进行分割,那么只能一次将大的日志(如Apache的日志)整个删除,这样也丢失了很多对网站比较宝贵的信息,因为这些日志可 ...

  7. 【Leetcode_easy】617. Merge Two Binary Trees

    problem 617. Merge Two Binary Trees     参考 1. Leetcode_easy_617. Merge Two Binary Trees; 完    

  8. Yarn使用笔记

    1.安装需要下载安装包(这里只介绍windows系统的安装) 安装成功,会如图提示! 版本号:Yarn安装包-yarn-0.24.6 安装包下载地址:链接:http://pan.baidu.com/s ...

  9. Jenkins增加日志查看内容. 如何查看Jenkins插件的日志?

    进入Jenkins日志项 添加新的日志记录 把插件的GroupID信息填入 对应的源代码 日志生成代码 执行插件,即可查看插件里的日志输出

  10. ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法

    这个是非常常用的案例,ThinkPHP 5 文件上传及指定宽高生成缩略图公共方法/** * 单文件上传 * name:表单上传文件的名字 * ext: 文件允许的后缀,字符串形式 * path:文件保 ...