React에서 동적으로 생성된 이미지를 공유하는 방법

만남을 추적할 수 있는 pokémon related app을 개발하고 있습니다. 프로세스 전반에 걸쳐 실행 요약 이미지를 생성하는 방법도 추가했습니다.



이미지 생성은 충분히 쉬웠지만 일반적으로 대부분의 사용자는 해당 이미지를 소셜 미디어 사이트에 직접 공유하기를 원합니다. Web Share API 가 들어옵니다! 이를 통해 OS에서 사이트를 공유하는 방법을 기본적으로 확인할 수 있으므로 Facebook, Twitter, Reddit 등과 직접 통합할 필요가 없습니다.

고지 사항: 당분간 이 API는 일부 운영 체제 및 브라우저에서 제한된 호환성을 가집니다. 현재 상태는 https://caniuse.com/?search=navigator.share을 확인하십시오.

요구 사항

공유 버튼

HTML에서 동적으로 이미지 생성

공유 버튼을 클릭하면 이미지를 다양한 옵션으로 공유

설정

무엇보다 이미지를 동적으로 생성하려면 타사 라이브러리가 필요합니다. 이 자습서에서는 html-to-image을 사용합니다. 시원한! 이제 공유 버튼 설정을 시작하겠습니다.

<div>
   <h1>Dynamically generate and share images</h1>
   <button>Share</button>
   <div>
       // ...Dynamically generated content
   </div>
</div>

충분히 간단합니다. 내용을 추출하기 위해 html-to-image를 설정합시다. 먼저 React의 useRef 후크를 사용하여 ref와 함께 동적 콘텐츠를 포함할 div를 연결해야 합니다.

const imageRef = useRef(null);

<div>
   <h1>Dynamically generate and share images</h1>
   <button>Share</button>
   <div ref={imageRef}>
       // ...Dynamically generated content
   </div>
</div>

이미지 생성 및 공유

html-to-image는 HTML 요소를 직접 제거하고 이미지를 생성하는 기능인 toBlob을 제공합니다. 여기서 우리는 함수를 생성합니다:

const handleShare = async () => {
    const newFile = await toBlob(imageRef.current);
    const data = {
      files: [
        new File([newFile], 'image.png', {
          type: newFile.type,
        }),
      ],
      title: 'Image',
      text: 'image',
    };
}

또한 올바르게 공유할 수 있도록 결과를 형식화해야 합니다. Ref에서 현재 값을 추출하고 제목과 텍스트를 설정하여 이미지를 Blob으로 만들면 됩니다.

const handleShare = async () => {
    const newFile = await toBlob(imageRef.current);
    const data = {
      files: [
        new File([newFile], 'image.png', {
          type: newFile.type,
        }),
      ],
      title: 'Image',
      text: 'image',
    };

    try {
      await navigator.share(data);
   } catch (err) {
     console.error(err);
   }
}

이미지 공유는 구성된 데이터를 공유하는 것만큼 간단합니다. 사용 가능한 옵션 목록이 자동으로 표시됩니다. 하지만 기다려! 이전에 호환성 문제에 대해 언급한 이유 때문에 try 및 catch를 추가했지만 한 단계 더 나아가 API는 데이터를 공유할 수 있는지 확인하는 기능인 navigator.canShare도 제공합니다.

  try {
      if (!navigator.canShare(data)) {
        console.error("Can't share");
      }
      await navigator.share(data);
    } catch (err) {
      console.error(err);
    }

버튼에 연결된 함수로 최종 결과를 확인하십시오.



공유가 모바일에 표시되는 방식:



아래 댓글에서 Web Share API를 어떻게 사용했는지 알려주세요!