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


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扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
Jan 17 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
js canvas实现星空连线背景特效
Nov 01 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 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
PHP cron中的批处理
2008/09/16 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
js正则表达式中test,exec,match方法的区别说明
2014/01/29 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
微信小程序上传图片功能(附后端代码)
2020/06/19 Javascript
json 带斜杠时如何解析的实现
2019/08/12 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
Python日期操作学习笔记
2008/10/07 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python制作朋友圈九宫格图片
2019/11/03 Python
MxNet预训练模型到Pytorch模型的转换方式
2020/05/25 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
某公司部分笔试题
2013/11/05 面试题
如何进行有效的自我评价
2013/09/27 职场文书
秸秆管理实施方案
2014/03/15 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
优质服务演讲稿
2014/05/14 职场文书
法律系毕业生求职信
2014/05/28 职场文书
服装设计专业求职信
2014/06/16 职场文书
幼师求职信
2014/06/23 职场文书
交通志愿者活动总结
2014/06/27 职场文书
付款承诺函范文
2015/01/21 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
2015暑假假期总结
2015/07/13 职场文书
CSS使用SVG实现动态分布的圆环发散路径动画
2022/12/24 HTML / CSS