欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

react native踩坑日记(7):头像编辑(拍照,选择图片,上传,毛玻璃背景效果实现方式)

程序员文章站 2022-06-19 17:54:42
最近继续迭代RN项目。也开始了继续踩坑,爬坑的“幸福生活”。上周刚完成头像设置的相关操作,大致分为毛玻璃背景,选择相册图片,拍照,图片裁剪,上传OSS(这一步主要是服务端配合,后面会详细说明)。由简到难,逐个讲解使用到的npm包和相关方法。1:毛玻璃的效果实现先看下效果图:要实现这个的效果,我尝试了使用opacity,但是跟这个完全不搭边,所以就找了个npm包,@react-native-community/blur,文档跳转yarn add @react-native-community/blur...

最近继续迭代RN项目。也开始了继续踩坑,爬坑的“幸福生活”。上周刚完成头像设置的相关操作,大致分为毛玻璃背景,选择相册图片,拍照,图片裁剪,上传OSS(这一步主要是服务端配合,后面会详细说明)。由简到难,逐个讲解使用到的npm包和相关方法。

1:毛玻璃的效果实现

先看下效果图:react native踩坑日记(7):头像编辑(拍照,选择图片,上传,毛玻璃背景效果实现方式)
要实现这个的效果,我尝试了使用opacity,但是跟这个完全不搭边,所以就找了个npm包,@react-native-community/blur文档跳转

yarn add @react-native-community/blur

or

npm install --save @react-native-community/blur

具体配置可查看对应文档。实测好用,这个没什么坑,装上就可以直接使用了。

2:选择图片,拍照使用

要实现这个,肯定想到的就是找依赖包了,我使用的是这个react-native-syan-image-picker,其中包括了裁剪返回base64编码的功能,比较实用。文档跳转

如果你们的项目中不需要裁剪可以换成这个react-native-image-picker,这个组件近期在维护,且使用起来相对简单一点,而且有对应操作的回调,方便出来用户操作。文档跳转,这个的使用方式就不说了,文档比较详细

安装依赖:

// Step 1 基于 npm
npm install react-native-syan-image-picker --save

// 或是 yarn
yarn add react-native-syan-image-picker

讲一个我开发过程中遇到的坑:RN0.6版本以后是不用link的,之前无脑按照文档安装依赖link某个依赖包后然后ios报错 react.h(大概内容,具体忘记了)找不到,然后按照提示unlink后即可正常运行,如果你使用的是0.6以上版本安装依赖后只需cd ios 执行pod install即可

上面是题外话。

然后具体的使用可查看官方文档。附上我使用的代码(不喜勿喷),因为使用相册和相机是两个方法所以需要一个参数来区分

// 选择图片或相册
  onClickChoosePicture = (comer) => {
    const options = {
      imageCount: 1, // 最大选择图片数目,默认6
      isCamera: true, // 是否允许用户在内部拍照,默认true
      isCrop: true, // 是否允许裁剪,默认false
      enableBase64: true,
      rotateEnabled: false,
    };
    let photoData = null;
    if (comer === 0) {
      ImagePicker.showImagePicker(options, (err, selectedPhotos) => {
        if (err) {
          console.log(err, 111);
          return;
        }
        photoData = selectedPhotos;
      });
    } else {
      ImagePicker.openCamera(options, (err, photos) => {
        if (err) {
          console.log(err);
          return;
        }
        photoData = photos;
        
      });
    }
  };

3: 文件转换

此依赖包返回数据并没有我们文件上传需要格式,所以我们需要获取到他返回的base64格式的字符串后在转码成文件ArrayBuffer格式。最终上传的是b。代码如下

说明:这里是把base64转换成了ArrayBuffer格式,只是转换成了可以适用于我们这个项目的文件格式,配上一张说明图

react native踩坑日记(7):头像编辑(拍照,选择图片,上传,毛玻璃背景效果实现方式)

	var arr = base64String.split(',');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = base64Npm.encodeFromByteArray(arr[1]); // 真机
    // var bstr = atob(arr[1]); // 模拟机
    var n = bstr.length;
    let b = new ArrayBuffer(n);
    var u8arr = new Uint8Array(b);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }

4:文件上传

因为我们需要上传的OSS,所以接下来的操作就需要服务端的配合了,我们服务端大佬比较和蔼可亲积极帮助我完成这个功能,上传所需的签名啊,id啊,什么乱七八糟的东西他已经处理好拼接成对应的URL,在获取上传权限的时候返回给我了,所以我直接使用axios调用即可,代码如下:

axios
      .put(signUrl, b, config)
      .then((response) => {
        if (response.status === 200) {
          this.refreshUserInfo(id);
        }
      })
      .catch((err) => {
        Toast.showInfo('上传失败');
        console.log(err.message);
      });

上传文件有put,和post两种方式,所需参数也不同,所以第四步对你们应该没啥帮助,只是提供一种思路。毕竟也需要服务端配合。

5:正常js把base64转换为bolb和文件格式方法

const base64ToBlob = function(base64Data) {
      let arr = base64Data.split(','),
        fileType = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        l = bstr.length,
        u8Arr = new Uint8Array(l);

      while (l--) {
        u8Arr[l] = bstr.charCodeAt(l);
      }
      return new Blob([u8Arr], {
        type: fileType,
      });
    };
    // blob转file
    const blobToFile = function(newBlob, fileName) {
      newBlob.lastModifiedDate = new Date();
      newBlob.name = fileName;
      return newBlob;
    };

    const blob = base64ToBlob(base64String);
    const file = blobToFile(blob, '图片');

本文地址:https://blog.csdn.net/weixin_43827462/article/details/111832228

相关标签: react native