Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-03-23 10:02:40
original
2567 Les gens l'ont consulté

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; 
 }
});
Copier après la connexion

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) {
  }
 });
 },
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!