base64图片流的处理以及保存分享

场景实现:后台返回base64的图片流,是一个小程序码,进行渲染在页面,并保存,分享,实现效果见下图

在这里插入图片描述

  1. 首先,对就扣图片流进行处理
  2. 进行base64转化本地图
  3. 进项保存
getQrImgBase64: function () {
	  var that = this;
	  var url = netWork.config.apiHost + netWork.urlValue.fxBase64;
	  var param = {
	    "bizType": 19,
	    "bizValue": JSON.stringify({
	      "shareCode": "W43XV5B3"
	    }),
	    "page":"pages/personalCenter/personal",
	  }
	  wx.showLoading({
	    title: '加载中..',
	  })
	  apiMana.api.postBasic(url, param, res => {
	    wx.hideLoading();
		that.setData({
			// scene: res.data,//获取base64二维码
			scene: "data:image/png;base64,"+ res.data,
		});
		// that.getQrCode()
	     util.dealBase64(res.data).then(res => {
	    }, res => {
	      wx.hideLoading();
	      var mes = "网络错误,请稍后重试~"
	      if (res != null) {
	        if (res.message != undefined && res.message != "") {
	          mes = res.message;
	        }
	      }
	      wx.showToast({
	        title: mes,
	        icon: 'none',
	        duration: 2000
	      })
	    })
	  }, res => {
	    wx.hideLoading();
	    var mes = "网络错误,请稍后重试~"
	    if (res != null) {
	      if (res.message != undefined && res.message != "") {
	        mes = res.message;
	      }
	    }
	    wx.showToast({
	      title: mes,
	      icon: 'none',
	      duration: 2000
	    })
	  })
	},

base64的转化,暂时没用到这块,用的保存那块

/**
	 *  base64图片处理
	 */
	getQrCode: function() {
		var that = this;
		/** 获取本地文件管理系统 */
	   const fsm = wx.getFileSystemManager();
	   var showImgData = that.data.SunCode;
	   let src = `data:image/png;base64,${showImgData}`;
	   showImgData = showImgData.replace(/\ +/g, ""); //去掉空格方法
	   showImgData = showImgData.replace(/[\r\n]/g, "");
	   const buffer = wx.base64ToArrayBuffer(showImgData);//  将 base64 字符串转成 ArrayBuffer 对象
	   const timestamp = Date.parse(new Date());  
	   const fileName = `${wx.env.USER_DATA_PATH}/share_img_${timestamp}.png`;
	    fsm.writeFileSync(fileName, buffer, 'binary');
	   console.log("000000",fileName)
	   that.setData({
		   sceneFileNam:fileName
	   })
	   // console.log("======",that.data.sceneFileNam)
	},

上面那段代码是为了这个方法,但是有坑,没实现,本来要做点击图片放大之后长按保存和分享

// 点击图片二维码
	previewImg: function(e) {
		var that = this;
		var scene_img = e.currentTarget.dataset.src; //这里添加图片的地址
		**由于这个是base64的没转化,点击之后就不出现图**
		// var scene_img = that.data.sceneFileNam; //这里添加图片的地址
		that.setData({
			scene: scene_img
		})
		wx.previewImage({
			urls: that.data.scene.split(',')
			// 需要预览的图片http链接 使用split把字符串转数组。不然会报错
		})
	},	

点击保存

savePhoto: function() {
	    let that = this
	    //若二维码未加载完毕,加个动画提高用户体验
	    wx.showToast({
	      icon: 'loading',
	      title: '正在保存图片',
	      duration: 1000
	    })
	    // base64图片编码的图片保存
	 
	    var save = wx.getFileSystemManager();
	    var number = Math.random();
	    save.writeFile({
			 filePath: `${wx.env.USER_DATA_PATH}/share_img_${number}.png`,
	      // filePath: wx.env.USER_DATA_PATH + '/pic' + number + '.png',
	      data: that.data.scene.slice(22),
	      **//这句如果不加保存之后是识别不到图片格式的,一定要加**
	      encoding: 'base64',
	      success: res => {
	        console.log("669699", res)
	        wx.saveImageToPhotosAlbum({
	          filePath: `${wx.env.USER_DATA_PATH}/share_img_${number}.png`,
	          success: function (res) {
	            // globalMethod.method.hideLoading(100)
	            wx.showToast({
	              title: '保存成功',
	              icon: "success",
	              duration: 1000
	            })
	          },
	          fail: function (err) {
	            // globalMethod.method.hideLoading(100)
	            wx.showToast({
	              title: '保存失败',
	              icon: "success",
	              duration: 1000
	            })
	            console.log(err)
	          }
	        })
	        console.log(res)
	      },
	      fail: err => {
	        console.log(err)
	      }
	    })
	  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值