WeChat applet develops image compression function-JS Tutorial-php.cn

WeChat applet develops image compression function

php中世界最好的语言

Release： 2018-03-23 10:02:40

Original

2612 people have browsed it

This time I will bring you the WeChat applet developmentPictureCompression function, what are the notes for developing the image compression function of WeChat applet, the following is a practical case, let’s take a look one time.

Brother Xiaolong’s WeChat applet is equivalent to 6 in the IE world in its initial stage. Here I will tell you about a pit that I just went through.

Photography API.

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

Copy after login

In the above, the size type is clearly given. I wanted to save trouble, but it is of no use...
Without further ado, let me tell you the difference between IOS and Android, and the compression of photos and pictures. pit.

// 点击照相
 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) {
  }
 });
 },

Copy after login

After clicking to take a photo, IOS performs image compression function. However, Android is still so large, so in this process, we need to determine the current model and then perform canvas compression.

The above code can be used as soon as you get it, but there is a small part of wxml that needs to be added with a canvas tag.

Make interface calls. I hope everyone has to help.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!