Comment implémenter la fonction de compression d'image de l'applet WeChat

Cet article présente principalement en détail la fonction de compression d'image de l'applet WeChat. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

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; 
 }
});

Ci-dessus, le type de taille est clairement donné. Je voulais éviter les ennuis, mais cela ne sert à rien...
Arrêtez de parler. c'est absurde, laissez-moi vous parler des différences entre IOS et Android, et des pièges de la compression d'image lors de la prise de photos.

// 点击照相
 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(&#39;attendCanvasId&#39;);
   ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96);
   ctx.draw();
   that.prodImageOpt();
  }
  }
 });
 },

 // 生成图片
 prodImageOpt:function(){
 var that = this;
 wx.canvasToTempFilePath({ 
  canvasId: &#39;attendCanvasId&#39;,
  success: function success(res) {
  that.setData({
   canvasImgUrl:res.tempFilePath
  });
  // 上传图片
  that.uploadFileOpt(that.data.canvasImgUrl);
  },
  complete: function complete(e) {
  }
 });
 },

Après avoir cliqué à nouveau sur la photo, la fonction de compression d'image IOS est exécutée. Cependant, la version Android est toujours aussi volumineuse, donc dans ce processus, nous devons. juger le modèle actuel, puis effectuer une compression du canevas.

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.

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

Recommandations associées :

Méthode de mise en œuvre de la compression d'image dans JS

Utilisation recommandée du téléchargement de la compression d'image 10 couramment utilisée, téléchargement de bienvenue !

Analyse approfondie de la fonction de téléchargement de compression d'image HTML5

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!