小程序选择手机图片后 压缩图片 转码base64

xml:

  

js:

  //选择图片
 takePhoto(){
  var that = this;

  wx.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success (res) {
		var tempFilePaths = res.tempFilePaths
		 console.log(tempFilePaths);
		 console.log(res.tempFiles[0].size/1024+'kb');
		 var size = res.tempFiles[0].size/1024; //kb单位
      // tempFilePath可以作为img标签的src属性显示图片
	  var img = tempFilePaths[0];
		that.setData({
				imagesrc: img,
		})
		that.imgToMin(img,size); //获取图片后压缩
		
    },
	fail(err){
		console.log(err);
	}
  })
},
 //图片转码64
  base64(url,type){
		var that = this;
	      return new Promise((resolve, reject) => {
	        wx.getFileSystemManager().readFile({
	          filePath: url, //选择图片返回的相对路径
	          encoding: 'base64', //编码格式
	          success: res => {
	            resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
				// console.log(res.data);
				that.doDiscernment(res.data);//提交后台
	          },
	          fail: res => reject(res.errMsg)
	        })
	      })
	},
	//缩放图片
	imgToMin(img,size){
		var that = this;
		//size小于100kb 时 直接转码识别
		if(size<100){
			that.base64(img,"jpg");
			return;
		}
		
		//先获取图片  然后根据长宽 缩小 之后获取图片
	wx.getImageInfo({
	  src: img,
	  success (res) {
	    console.log(res.width)
	    console.log(res.height)
		
		var ratio = 2;
		var ww = res.width //图片原始长宽
		var hh = res.height
		
		var canvasWidth = res.width //图片原始长宽
		var canvasHeight = res.height
					
		while (canvasWidth > 375 || canvasHeight > 520){// 保证宽高在400以内
			canvasWidth = Math.trunc(canvasWidth / ratio)
			canvasHeight = Math.trunc(canvasHeight / ratio)
			ratio++;
		}
		console.log(canvasWidth)
		console.log(canvasHeight)
		console.log(ww)
		console.log(hh)
			//绘制图片
			var ctx = wx.createCanvasContext('attendCanvasId')
			ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight)
			ctx.draw(false, setTimeout(function(){
				 wx.canvasToTempFilePath({
					 canvasId: 'attendCanvasId',
					 width:canvasWidth,
					 height:canvasHeight,
					 destWidth: canvasWidth,
					 destHeight: canvasHeight,
					 fileType:'jpg',
					 success: function (res) {
						 console.log(res.tempFilePath)//最终图片路径
						 that.setData({
						   canvasImgUrl: res.tempFilePath
						 });
						 that.base64(res.tempFilePath,"jpg");//转码提交
					 },
					 fail: function (res) {
						 console.log("缩放图片失败");
						 console.log(res.errMsg)
						 wx.hideLoading();
						 wx.showToast({
						   title: '识别图片失败',
						   image:'../../utils/img/wrong.png',
						   duration: 2000
						 })
						 that.setData({
						 	title: "识别失败",
						 })
					}
				},this) //要填写this对象,表示canvas这个对象
			},1000))    //留一定的时间绘制canvas 否则会报错fail canvas is empty
	  },
	  fail: function(res){
		console.log("获取图片失败");
	  	console.log(res.errMsg)
	  	wx.hideLoading();
	  	wx.showToast({
	  	  title: '识别图片失败',
	  	  image:'../../utils/img/wrong.png',
	  	  duration: 2000
	  	})
	  	that.setData({
	  		title: "识别失败",
	  	})
	  },		
	})
	
},

你可能感兴趣的:(微信小程序,JavaScript,图片转码,小程序压缩图片)