将背景设置为图像以保存到图库

Question

我的 react-native 项目中有一个来自 react-native-qrcode-svg 的 qr-code，如下所示：

<QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  getRef={(c) => (svg = c)}
/>;

我要收藏这个二维码到相册！我使用此代码将其保存到画廊！

svg.toDataURL((data) => {
  RNFS.writeFile(
    RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
    data,
    "base64"
  )
    .then((success) => {
      return CameraRoll.save(
        RNFS.CachesDirectoryPath + `/${tracking_code}.png`,
        "photo"
      );
    })
    .then(() => {
      onClose();
    })
    .catch((e) => {
      console.log("saveToGallery", e);
    });
});

现在我想把这张白底二维码保存到图库中！

因为现在，我将 QR 码保存到画廊，画廊在黑色背景下显示此内容，扫描仪未检测到 QR-code！！！ 有什么解决办法吗？？

换句话说，如何将两张图片（白色背景和QR-code）组合在一起，或者如何为这张图片设置背景？？

Answer 1

您可以简单地将 quietZone 属性添加到 QRCode 组件。这个道具是二维码周围的边距，当你保存二维码时它会显示！！

<QRCode
  value={singleTicketResponse.voucher}
  size={width * 0.5}
  quietZone={10} // this props
  getRef={c => (svg = c)}
/>

将背景设置为图像以保存到图库

Set Background to an Image for Save to gallery

qr-code

react-native

react-native-fs

react-native-svg