React Native: Rendering Base64 images with 'react-native-canvas'

react-native-canvas 

  handleCanvas = (canvas) => {
    const ctx = canvas.getContext('2d');
    var img = new Image();
    img.src = `data:image/jpeg;base64,${this.state.imageURI}`
    img.onLoad = function() {
      ctx.drawImage(img, 0, 0, 100, 100);
    }
  }

<Canvas ref={this.handleCanvas}/>

Have you tried using addEventListener()?

 

react-native-signature-canvas

링크

npm install --save react-native-signature-canvas

 

base64 관련 속성: 

 

dataURL

string

default is "", Base64 string, Draws signature image from data URL.

 

Save base 64 imgase as File: 

 

react-native-cli를 사용하여 설치했다면 react-native-fs를 이용해야합니다.

If you use expo, you can use expo-file-system for save base64 image as local file,
if you use react-native-cli, use react-native-fs.

import * as FileSystem from 'expo-file-system';

const handleSignature = signature => {
    const path = FileSystem.cacheDirectory + 'sign.png';
    FileSystem.writeAsStringAsync(path, signature.replace('data:image/png;base64,', ''), {encoding: FileSystem.EncodingType.Base64}).then(res => {
      console.log(res);
      FileSystem.getInfoAsync(path, {size: true, md5: true}).then(file => {
        console.log(file);
      })
    }).catch(err => {
      console.log("err", err);
    })
};

 

타입스크립트와 함께 사용하는 방법:

import React, { useRef } from 'react';
import SignatureScreen, { SignatureViewRef } from 'react-native-signature-canvas';

interface Props {
  text: string;
  onOK: (signature) => void;
}

const Sign: React.FC<Props> = ({text, onOK}) => {
  const ref = useRef<SignatureViewRef>(null);

  const handleSignature = signature => {
    console.log(signature);
    onOK(signature);
  };

  const handleEmpty = () => {
    console.log('Empty');
  }

  const handleClear = () => {
    console.log('clear success!');
  }

  const handleEnd = () => {
      ref.current?.readSignature();
  }

  return (
    <SignatureScreen
        ref={ref}
        onEnd={handleEnd}
        onOK={handleSignature}
        onEmpty={handleEmpty}
        onClear={handleClear}
        autoClear={true}
        descriptionText={text}
    />
  );
}

export default Sign;