[React] navigator.share 이용법/ 모바일 공유 및 사진 저장 구현하기

react & typescript를 이용해 모바일 사이즈로 앱을 개발중인데 아래 사진과 같은 공유 및 이미지 저장 기능을 구현해야 하는 상황

일단 공유는 navigator.share를 이용해 간단하게 구현이 가능한데 "이미지 저장"이 아예 뜨지 않았다.

"이미지 저장" 띄우는 법

 if (navigator.share) {
      navigator.share({
          title: '제목',
          text: '공유내용',
          url: 'https://aaa.com',
      });
  }else{
      alert("공유하기가 지원되지 않는 환경 입니다.")
  }

(기본적인 navigator.share)
위와 같은 코드는 "이미지 저장"이 뜨지 않는다.

이미지 저장을 띄울려면 url이 아닌 file 을 사용해야 한다!

 if (navigator.share ) {
  
    navigator.share({
        title: '제목',
        text: '공유 내용',
        files: [file],
    });
}else{
    alert("공유하기가 지원되지 않는 환경 입니다.")
}

• 이미지 url이 아닌 input type=file 을 통해 얻은 이미지 파일을 넣어야 한다.

하지만 나는 file자체가 아닌 url로 변경된 상태에서 share를 실행시켜야 했기 때문에 url로 변경된 값을 다시 파일로 변경시키는 코드를 거쳤다.

url to file

 let arr:string[] = dataurl.split(','),
  //  @ts-ignore
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = window.atob(arr[1]), 
        n = bstr.length, 
        u8arr = new Uint8Array(n);
        
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    
    const file = new File([u8arr], imgName, {type:mime});

전체 코드

export const share = (dataurl:string, imgName:string) =>{
  ///url -> file 변경하는 코드
   let arr:string[] = dataurl.split(','),
  //  @ts-ignore
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = window.atob(arr[1]), 
        n = bstr.length, 
        u8arr = new Uint8Array(n);
        
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    
    const file = new File([u8arr], imgName, {type:mime});


  if (navigator.share ) {
  
    navigator.share({
        title: '제목',
        text: '공유 내용',
        files: [file],
    });
}else{
    alert("공유하기가 지원되지 않는 환경 입니다.")
}
}

• 이때 중요한 것은 처음 파일의 filename이 필요하다. 그래서 filename은 따로 저장을 해두었음