So implementieren Sie die Bildkomprimierungsfunktion des WeChat-Applets

Dieser Artikel stellt hauptsächlich die Bildkomprimierungsfunktion des WeChat-Applets im Detail vor. Ich hoffe, dass er für alle hilfreich ist.

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 zu reden Unsinn, lassen Sie mich Ihnen die Unterschiede zwischen IOS und Android und die Fallstricke der Bildkomprimierung beim Fotografieren erläutern.

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

Nachdem Sie erneut auf das Foto geklickt haben, wird die IOS-Bildkomprimierungsfunktion ausgeführt. Die Android-Version ist jedoch immer noch so groß, dass wir dies in diesem Vorgang tun müssen Beurteilen Sie das aktuelle Modell und führen Sie dann eine Canvas-Komprimierung durch.

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.

führt Schnittstellenaufrufe durch. Ich hoffe, es hilft allen.

Verwandte Empfehlungen:

Methode zur Implementierung der Bildkomprimierung in JS

Empfohlene 10 häufig verwendete Verwendung zum Hochladen von Bildkomprimierung, willkommener Download !

Eingehende Analyse der Upload-Funktion für die HTML5-Bildkomprimierung

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Bildkomprimierungsfunktion des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!