微信小程序实现图片压缩功能


Posted in Javascript onJanuary 26, 2018

小龙大哥的微信小程序在初始阶段相当于IE界的6,在这里给大家说一个刚趟过去的坑。

拍照的API。

wx.chooseImage({
 count: 1, // 默认9
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 var tempFilePaths = res.tempFilePaths; 
 }
});

在上边,明确的给出大小的类型,本想省事,然并没有什么用…..
废话少说,给大家说下IOS和安卓中差别,拍照图片压缩的坑。

// 点击照相
 takePictures:function(){
 var that = this;
 wx.chooseImage({
 count: 1, // 默认9
 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 var tempFilePaths = res.tempFilePaths;

 that.setData({
 attendSuccessImg:tempFilePaths[0]
 });

 // 上传图片
 //判断机型
 var model = "";
 wx.getSystemInfo({
 success:function(res){
 model= res.model;
 }
 })
 if(model.indexOf("iPhone") <= 0){
 that.uploadFileOpt(that.data.attendSuccessImg);
 console.log(111111)
 }else{
 drawCanvas();

 }

 // 缩放图片
 function drawCanvas(){
 const ctx = wx.createCanvasContext('attendCanvasId');
 ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96);
 ctx.draw();
 that.prodImageOpt();
 }
 }
 });
 },

 // 生成图片
 prodImageOpt:function(){
 var that = this;
 wx.canvasToTempFilePath({ 
 canvasId: 'attendCanvasId',
 success: function success(res) {
 that.setData({
 canvasImgUrl:res.tempFilePath
 });
 // 上传图片
 that.uploadFileOpt(that.data.canvasImgUrl);
 },
 complete: function complete(e) {
 }
 });
 },

再点击拍照后,IOS的进行了图片压缩功能,然而,安卓的依然是那么大,所以 在这过程中,我们需要判断下当前机型,然后执行canvas压缩。

上述代码,拿到即可用,但少一部分wxml中需要添加一个canvas标签。

进行接口调用。希望对大家有帮助。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js cookies 常见网页木马挂马代码 24小时只加载一次
Apr 13 Javascript
JavaScript 设计模式之组合模式解析
Apr 09 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
Apr 28 Javascript
Jquery绑定事件(bind和live的区别介绍)
Aug 23 Javascript
jQuery图片切换动画效果
Feb 28 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 #Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
Jan 25 #Javascript
jquery根据name取得select选中的值实例(超简单)
Jan 25 #jQuery
用jquery获取select标签中选中的option值及文本的示例
Jan 25 #jQuery
利用js给datalist或select动态添加option选项的方法
Jan 25 #Javascript
基于vue.js无缝滚动效果
Jan 25 #Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
Jan 25 #Javascript
You might like
php获取某个目录大小的代码
2008/09/10 PHP
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
thinkphp3.0 模板中函数的使用
2012/11/13 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
基于jquery的图片的切换(以数字的形式)
2011/02/14 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
下拉框select的绑定示例
2014/09/04 Javascript
jQuery中prev()方法用法实例
2015/01/08 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
jQuery获取select选中的option的value值实现方法
2016/08/29 Javascript
BootStrap入门教程(二)之固定的内置样式
2016/09/19 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python统计一个字符串中每个字符出现了多少次的方法【字符串转换为列表再统计】
2019/05/05 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
HTML5样式控制示例代码
2013/11/27 HTML / CSS
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
廉政教育心得体会
2014/01/01 职场文书
消防安全宣传标语
2014/06/07 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
遗嘱范文
2015/08/07 职场文书
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
浅谈Redis的keys命令到底有多慢
2021/10/05 Redis