robinyoon-dev commented 1 year ago

Description

아이패드 safari에서 이미지 저장 안 되는 문제 해결하자.

2023.07.08 아이패드 chrome에서도 '이미지로 저장하기' 기능이 작동되지 않는다.

Todo

[ ] 아이폰, 맥북도 아이패드와 같은 문제가 있는지 확인하기.
[ ] 문제 해결.
[ ] 문서화.

아이폰, 맥북 피드백

아이폰 크롬에서도 작동 X

자료

아이폰, 아이패드의 사파리에서 개발자 도구 열기(SAFARI DEBUGGING) file-saver 공식 문서 [React] 화면(DOM) 캡쳐 및 저장 기능 구현하기 (feat. html2canvas, file-saver)

robinyoon-dev commented 1 year ago

file-saver를 사용했으나 safari에선 동작을 안함.

현재 코드

import { MongoClient, ObjectId } from "mongodb";
import ShareBoard from "@/components/boards/ShareBoard";
import Layout from "@/components/layout/Layout";
import { useState, useEffect, useRef } from "react";
import styles from "@/styles/style.module.css";
import Link from "next/link";
import Grid1fr from "@/components/layout/Grid1fr";
import LoadingSpinner from "@/components/parts/LoadingSpinner";
import Head from "next/head";
import Confetti from "@/components/parts/Confetti";
import config from "@/config/mongo.config";
import html2canvas from "html2canvas";
import Image from "next/image";
import btnStyles from "@/components/layout/Button.module.css";
import saveAs from "file-saver";

function SharePage({ newBoard, bingoData, data }) {
  const [showCopiedMessage, setShowCopiedMessage] = useState(false);

  const [isLoading, setIsLoading] = useState(true);

  const divRef = useRef(null);
  const canvasRef = useRef(null);

  useEffect(() => {
    if (data !== null) {
      setIsLoading(false);
    }
  }, []);

  if (isLoading) {
    return <LoadingSpinner />;
  }

  const bingoUrl = getBingoUrl(bingoData);

  const shareUrl = `https://planbingo.vercel.app/fromLink?id=${data.id}${bingoUrl}`;

  const handleCopyClick = () => {
    navigator.clipboard.writeText(shareUrl);
    setShowCopiedMessage(true);
  };

  const downloadCanvasDiv = () => {
    const div = divRef.current;
    const canvas = canvasRef.current;

    canvas.width = div.offsetWidth;
    canvas.height = div.offsetHeight;

    html2canvas(div).then((canvas) => {
      canvas.toBlob((blob) => {
        if (blob != null) {
          saveAs(blob, `${data.title}.png`);
        }
      });
    });
  };

  return (
    <>
      <Head>
        <title>플랜 빙고</title>
      </Head>

      <Layout>
        {newBoard.newBoard && <Confetti />}
        {data.bingoCount === 8 && <Confetti />}
        {newBoard.newBoard && (
          <div className={styles.fontSize}>
            처음으로 플랜 빙고를 만들었어요!
          </div>
        )}
        {newBoard.newBoard === false && data.bingoCount !== 8 && (
          <div className={styles.fontSize}> 👏목표를 달성했군요!👏</div>
        )}
        {data.bingoCount === 8 && (
          <div className={styles.fontSize}>
            {" "}
            🎉축하합니다! 빙고를 완성했어요!🎉
          </div>
        )}

        <canvas ref={canvasRef} className={styles.canvas}></canvas>

        <div ref={divRef} className={styles.canvasDiv}>
          <ShareBoard
            bingoData={bingoData}
            main={data.main}
            title={data.title}
            value1={data.value1}
            value2={data.value2}
            value3={data.value3}
            value4={data.value4}
            value5={data.value5}
            value6={data.value6}
            value7={data.value7}
            value8={data.value8}
            value9={data.value9}
            bgColor={data.bgColor}
            cubeColor={data.cubeColor}
            bingoCount={data.bingoCount}
            patternArray={data.patternArray}
          />
        </div>

        {newBoard.newBoard && (
          <div className={styles.fontSizeS}>목표를 공유해볼까요?</div>
        )}
        {newBoard.newBoard === false && data.bingoCount !== 8 && (
          <div className={styles.fontSizeS}> 플랜 빙고를 공유해봐요😊</div>
        )}
        {data.bingoCount === 8 && (
          <div className={styles.fontSizeS}>
            {" "}
            완성한 플랜 빙고를 자랑해봐요!
          </div>
        )}

        {showCopiedMessage && (
          <div className={styles.alarm}>링크가 복사되었습니다!</div>
        )}
        <Grid1fr>
          <button
            className={[btnStyles.button, styles.btnColor].join(" ")}
            onClick={downloadCanvasDiv}
          >
            <Image
              src={"/download.svg"}
              alt={"download an image"}
              width={30}
              height={30}
            />{" "}
            <p>이미지로 저장하기</p>
          </button>

          <button
            onClick={handleCopyClick}
            className={[btnStyles.button, styles.btnColor].join(" ")}
          >
            <Image
              src={"/link.svg"}
              alt={"share a link"}
              width={30}
              height={30}
            />{" "}
            <p>링크 복사하기</p>
          </button>

          <Link
            className={[btnStyles.button, styles.btnNoneColor].join(" ")}
            href="/home"
          >
            <Image
              src={"/home.svg"}
              alt={"back to home"}
              width={30}
              height={30}
            />{" "}
            <p>홈으로</p>
          </Link>
        </Grid1fr>
      </Layout>
    </>
  );
}

export async function getServerSideProps(ctx) {
  let newBoard, bingoData, data;

  if (ctx.query.bingoData) {
    bingoData = JSON.parse(ctx.query.bingoData);
  } else {
    bingoData = {
      bingo123: false,
      bingo456: false,
      bingo789: false,
      bingo147: false,
      bingo258: false,
      bingo369: false,
      bingo159: false,
      bingo357: false,
    };
  }

  data = JSON.parse(ctx.query.data);

  if (data.newBoard) {
    newBoard = true;
  } else {
    newBoard = false;
  }

  // fetch data from an API
  const client = await MongoClient.connect(config.mongoClient);
  const db = client.db();

  const boardsCollection = db.collection("boards");

  const board = await boardsCollection.findOne({ _id: ObjectId(data._id) });

  client.close();

  return {
    props: {
      newBoard: {
        newBoard,
      },
      bingoData: {
        bingo123: bingoData.bingo123,
        bingo456: bingoData.bingo456,
        bingo789: bingoData.bingo789,
        bingo147: bingoData.bingo147,
        bingo258: bingoData.bingo258,
        bingo369: bingoData.bingo369,
        bingo159: bingoData.bingo159,
        bingo357: bingoData.bingo357,
      },
      data: {
        id: board._id.toString(),
        user: board.user,
        main: board.main,
        title: board.title,
        value1: board.value1,
        value2: board.value2,
        value3: board.value3,
        value4: board.value4,
        value5: board.value5,
        value6: board.value6,
        value7: board.value7,
        value8: board.value8,
        value9: board.value9,
        bgColor: board.bgColor,
        cubeColor: board.cubeColor,
        bingoCount: board.bingoCount,
        patternArray: board.patternArray,
      },
    },
  };
}

export function getBingoUrl(bingoData) {
  const bingoNumbers = [
    "bingo123",
    "bingo456",
    "bingo789",
    "bingo147",
    "bingo258",
    "bingo369",
    "bingo159",
    "bingo357",
  ];

  const tempArray = bingoNumbers.map((bingoNumber) => {
    if (bingoData[bingoNumber]) {
      return `&bingo=${bingoNumber}`;
    } else {
      return;
    }
  });

  return tempArray.join("");
}

export default SharePage;

robinyoon-dev commented 1 year ago

blob을 url로 바꿨으나 safari에서는 여전히 다운로드 불가

코드

    html2canvas(div).then((canvas) => {

      const dataURL = canvas.toDataURL("image/png");
      saveAs(dataURL, `${data.title}.png`);

};

robinyoon-dev / plan-bingo-project

🐞 아이패드에서 '이미지로 저장하기' 기능이 작동 안 되는 문제 해결 #42

Description

Todo

아이폰, 맥북 피드백

자료

file-saver를 사용했으나 safari에선 동작을 안함.

blob을 url로 바꿨으나 safari에서는 여전히 다운로드 불가