微信小程序官方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. TensorFlow Object Detection API —— 测试自己的模型

    (flappbird) luo@luo-All-Series:~/MyFile/TensorflowProject/Mask_RCNN/mask_rcnn_20190518/Mask_RCNN/mod ...

  2. JavaScript——closures(待续)

    问答原文:How do JavaScript closures work?

  3. Qt编写输入法V2019终极版

    一.前言 之前写过的V2018版本的输入法,本来已经很完善了,不打算更新升级了,最近有个朋友找我定制一个输入法,需要高仿一个苹果MAC电脑的输入法,MAC操作系统的审美无疑是相当棒的,于是乎直接拿以前 ...

  4. 重装GUI前备份GUI配置

    sap系统要重装, gui配置 想要保存,这个要怎么弄? SAP菜单  选项-> 本地数据 -> 历史记录 里的地址 C:\Users\Administrator\AppData\Roam ...

  5. thymeleaf中switch case多出一个空行

    以下是<thymeleaf3.0.5中文参考手册.pdf>中的代码,官方代码没有具体去查询. <div th:switch="${user.role}"> ...

  6. (十)Centos之文件搜索命令find

    1.1 find [搜索范围] [搜索条件](搜索文件) find是在系统当中搜索符合条件的文件名. 如果需要匹配,使用通配符匹配,通配符是完全匹配. * 匹配任意内容 ?匹配任意一个字符 []匹配任 ...

  7. MySQL创建触发器样例

    # init DROP TABLE IF EXISTS students; DROP TABLE IF EXISTS class; # 创建测试用的班级表 CREATE TABLE class ( c ...

  8. iOS-GCD处理后台线程和UI线程的交互

    一个例子: 在iPhone上做一个下载网页的功能,就是:在iPhone上放一个按钮,单击按钮时,显示一个转动的圆圈,表示正在进行下载,下载完成后,将内容加载到界面上的一个文本控件上. 使用GCD前: ...

  9. python:序列化与反序列化(json、pickle、shelve)

    本节内容 前言 json模块 pickle模块 shelve模块 总结 一.前言 1. 现实需求 每种编程语言都有各自的数据类型,其中面向对象的编程语言还允许开发者自定义数据类型(如:自定义类),Py ...

  10. canvas梦幻七彩泡泡

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...