WeChat-Applet entwickelt Bildkomprimierungsfunktion

Dieses Mal stelle ich Ihnen die Bildkomprimierungsfunktion der WeChat-Miniprogrammentwicklung vor. Was sind die Vorsichtsmaßnahmen für die Entwicklung der Bildkomprimierungsfunktion des WeChat-Miniprogramms? . Lasst uns einmal einen Blick darauf werfen.

Das WeChat-Applet von Bruder Xiaolong entspricht in der Anfangsphase 6 in der IE-Welt. Hier erzähle ich Ihnen von einer Grube, die ich gerade durchgemacht habe.

Fotografie-API.

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

Oben ist der Größentyp klar angegeben. Ich wollte mir Ärger sparen, aber es nützt nichts...
Hör auf, Unsinn zu reden, lass mich dir den Unterschied zwischen IOS erklären und Android, und Bilder aufnehmen Fallstricke bei der Bildkomprimierung.

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

Nach dem Klicken zum Aufnehmen eines Fotos führt IOS eine Bildkomprimierung durch. Allerdings ist Android immer noch so groß, dass wir während dieses Vorgangs das aktuelle Modell ermitteln und dann eine Canvas-Komprimierung durchführen müssen.

Der obige Code kann verwendet werden, sobald Sie ihn erhalten, es gibt jedoch einen kleinen Teil von wxml, der mit einem Canvas-Tag hinzugefügt werden muss.

Schnittstellenaufrufe durchführen. Ich hoffe, es hilft allen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung der jQuery-Code-Optimierungsmethoden

Umgang mit unvollständiger Seitenanzeige im 360-Browser-Kompatibilitätsmodus

Detaillierte Erläuterung der asymmetrischen Verschlüsselung von Node.js

Das obige ist der detaillierte Inhalt vonWeChat-Applet entwickelt Bildkomprimierungsfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!