首页 > 开发 > JS > 正文

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

2024-05-06 16:42:07
字体:
来源:转载
供稿:网友

小龙大哥的微信小程序在初始阶段相当于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标签。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表