如何在本机反应中制作javascript图像blob对象?

Posted

技术标签:

【中文标题】如何在本机反应中制作javascript图像blob对象?【英文标题】:How to make javascript image blob object in react native? 【发布时间】:2021-12-26 21:45:00 【问题描述】:

我必须像这样制作一个图像 blob 对象:

现在我可以在我存储在变量中的 react native 中获取图像 base64 url​​:

const base64 = img.data;

我试过这种方法,但没有用:

  function b64toBlob(dataURI) 
      var byteString = atob(dataURI.split(',')[1]);
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) 
        ia[i] = byteString.charCodeAt(i);
      
      return new Blob([ab], type: 'image/jpeg');
    
    const blob = b64toBlob(base64);

    console.log(blob);

const base64 = img.data;

现在如何在 react native 中使用这个 base64 变量创建一个像上图一样的 blob 对象?

【问题讨论】:

【参考方案1】:

我通过这种方式解决了这个问题:

  ImagePicker.openPicker(
                      width: 400,
                      height: 400,
                      cropping: true,
                      includeBase64: true,
                    )
                      .then(image => 
                        setImg(image);
                      )
                      .then(() => setModalVisible(prev => !prev));


  const image = 
        name: nn,
        uri: img.path,
        type: img.mime,
        size: img.size,
        lastModifiedDate: JSON.parse(img.modificationDate),
        uid: img.modificationDate,
      ;
      const form = new FormData();
      form.append('file', image);
      axios
        .post('url', form, 
          headers: 
            Authorization: `bearer $JSON.parse(token)`,
          ,
        )

【讨论】:

以上是关于如何在本机反应中制作javascript图像blob对象?的主要内容,如果未能解决你的问题,请参考以下文章

如何制作选框以反应原生?

如何在本机反应中为数组的每个元素分配相同的值。如何在本机反应中制作密钥对数组

在本机反应中使用地图功能时图像未显示

如何在本机反应中制作动画可折叠组件?

如何在本机反应中在图像周围浮动文本

如何在本机反应中减小图像文件大小?