小程序的图片base64图片的处理：页面显示和下载

 

页面显示：

显示情况1（后端处理好的）：如果页面显示时，后端已经生成图片base64文件流格式，则直接赋值给image的src属性做绑定，就能进行对应的展示。

显示情况2（后端未处理的）：如果页面显示时，后端生成的图片不是base64文件流格式，则需要手动（后端如果返回的时文件访问路径，那么需要在返回的文件路径最前面拼接（“data:image/png;base64,”）进行转化后赋值给image的src属性做绑定，就能进行对应的展示。

页面下载：

下载情况1（后端处理好的）：如果页面下载时，后端已经生成图片base64文件流格式，下载时则需要手动去掉后端添加好的（“data:image/png;base64,”），下载的图片才能是有效的图片。

下载情况2（后端未处理的）：如果页面下载时，后端生成的图片不是base64文件流格式，则直接接调用下载图片的api方法就能正常下载，并且下载下来的图片是有效图片。

例如：

          <!-- 显示小程序的二维码 -->
		  <view class="bar_code_box"		  
            ><image class="bar_code_img" :src="QRCodeUrl" mode=""></image
          ></view>
          <view class="greetings_box"
            >-{{ isLive ? '精彩活动' : '优质成果' }}，邀你共赏-</view
          >

js代码：

  data() {
    return {
      isLive: true,   // 默认显示的是活动的分享页面
      QRCodeUrl: '', // 二维码img的url
      timer: true, // 存一个定时器状态开关
    }
  },
  methods: {
	// 防抖处理 将base64编码保存到本地临时文件并获取地址 
	debounce() {
	  let that = this
	  if (that.timer) {
	    that.timer = false
	    // that.onDown(that.QRCodeUrl)
	    that.getPath(that.QRCodeUrl)
	    setTimeout(() => {
	      console.log('你要变成🐒🐒🐒🐒防抖函数')
	      that.timer = true
	    }, 3000)
	  } else {
	    uni.showToast({
	      title: '稍等，请勿重复操作',
	      icon: 'none',
	      duration: 5000,
	    })
	  }
	},
    /**将base64编码保存到本地临时文件并获取地址 */
    getPath(base64) {
      let that = this
      /*code是指图片base64格式数据*/
      //声明文件系统
      //随机定义路径名称
      const times = new Date().getTime() // 时间戳
      const fileImgPath = wx.env.USER_DATA_PATH + '/' + times + '.png'
      //将base64图片写入
      uni.getFileSystemManager().writeFile({
        filePath: fileImgPath,
        data: base64.replace('data:image/png;base64,', ''),
        encoding: 'base64',
        success: (res) => {
          //写入成功了的话，新的图片路径就能用了
          //使用 uni.saveImageToPhotosAlbum() 方法保存
          uni.saveImageToPhotosAlbum({
            filePath: fileImgPath,
            success: function (res2) {
              uni.showToast({
                title: '保存成功，可以从相册选择再分享',
                icon: 'none',
                duration: 5000,
              })
            },
            fail: function (err) {
              uni.showToast({
                title: '保存失败，您是否授权相册权限',
                icon: 'none',
                duration: 5000,
              })
            },
          })
        },
      })
    },
}

是scss编译器的css样式：

      .bar_code_box {
        width: 560rpx;
        height: 180rpx;
        display: flex;
        justify-content: center;
        .bar_code_img {
          width: 180rpx;
          height: 180rpx;
        }
      }