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


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 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
功能强大的jquery.validate表单验证插件
Nov 07 Javascript
JavaScript实现实时更新系统时间的实例代码
Apr 04 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 Javascript
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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
用php实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
javascript中的几个运算符
2007/06/29 Javascript
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
2009/03/26 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
jQuery中设置form表单中action值的实现方法
2016/05/25 Javascript
省市选择的简单实现(基于zepto.js)
2016/06/21 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
Vue+webpack项目基础配置教程
2018/02/12 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
vue使用微信JS-SDK实现分享功能
2019/08/23 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
2019/10/17 Javascript
Python入门_条件控制(详解)
2017/05/16 Python
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
python使用pyqt写带界面工具的示例代码
2017/10/23 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
解决django的template中如果无法引用MEDIA_URL问题
2020/04/07 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
2021/03/01 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
线程同步的方法
2016/11/23 面试题
警示教育活动总结
2014/05/05 职场文书
2014年环保局工作总结
2014/12/11 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
php字符串倒叙
2021/04/01 PHP
Python破解极验滑动验证码详细步骤
2021/05/21 Python
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
python not运算符的实例用法
2021/06/30 Python