L'applet WeChat développe une fonction de compression d'image

Cette fois, je vais vous présenter la fonction de compression image du développement du mini programme WeChat. Quelles sont les précautions pour développer la fonction de compression d'image du mini programme WeChat ? . Jetons un coup d'oeil une fois.

L'applet WeChat de frère Xiaolong équivaut à 6 dans le monde IE au stade initial. Ici, je vais vous parler d'un gouffre que je viens de traverser.

API de photographie.

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

En haut, le type de taille est clairement indiqué. Je voulais éviter les ennuis, mais cela ne sert à rien...
Arrêtez de dire des bêtises, laissez-moi vous dire la différence entre IOS. et Android, et prendre des photos. Les pièges de la compression d'images.

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

Après avoir cliqué pour prendre une photo, IOS effectue une compression d'image. Cependant, Android est toujours aussi volumineux, donc au cours de ce processus, nous devons déterminer le modèle actuel, puis effectuer une compression de toile.

Le code ci-dessus peut être utilisé dès que vous l'obtenez, mais il y a une petite partie de wxml qui doit être ajoutée avec une balise canvas.

Faites des appels d'interface. J'espère que cela aide tout le monde.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Un résumé des méthodes d'optimisation du code jQuery

Comment gérer l'affichage incomplet des pages en mode de compatibilité du navigateur 360

Explication détaillée du chiffrement asymétrique de Node.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!