WeChat applet implementation picture compression function

Xiaolong big brother’s WeChat applet is equivalent to the IE world in the initial stage. Here is a pit just in the past.

Take a photo of the API.

WX.chooseImage ({Count: 1, // Default 9 siztype: [‘Original’, ‘compressed’], // can be specified as original image or a compressed map The default has SourceType: [‘Album’, ‘Camera’], // You can specify the source is an album or a camera. The default is Success: function (res) {// Returns the local file path of the selected photo List, TempFilePath can be displayed as an IMG tag of SRC attribute to display image var tempfilepaths = res.TempFilePaths;}};
  On the top, explicitly give the size of the size, this I don't have anything to save, but I don't use it ... ..  Tony said nonsense, tell you about IOS and Android differences, take pictures of the pit. 
// Click on the camera TakePictures: function () {var this; wx.chooseimage ({Count: 1, // Default 9 siztype: [‘compressed “] , // can be specified as the original image or a compressed map, the default has SourceType: [‘Camera’], // You can specify the source is a photo album or the camera. The default is Success: function (res) {// Return Selected Photo List of Local Files, TempFilePath can display image Var TempFilePath = Res.TempFilePath as the src property of the IMG tagS; That.Setdata ({Attendsuccessimg: TempFilePaths [0]}); // Upload picture // Judgment model var model = “”; wx.getsysteminfo ({Success: function (res) {model = res. model;} }) IF (“iPhone”)


After taking a photo, iOS has a picture compression function, however, Android is still so big, so In this process, we need to judge the current model, then perform Canvas compression.

The above code is available, but a portion of the WXML needs to be added.
 Interface call. I hope to help everyone.  <= 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) {
 }
 });
 },
 I recommend now to pay more attention to WeChat applets: "WeChat applet development tutorial" Xiaobian is carefully organized, I hope I like it. 
The above is all of this article, I hope to help everyone, I hope you will support Tumi Clouds.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment