Next.js react-view-pdf&fabric.js

"use client"
import dynamic from 'next/dynamic';
import React from 'react';
import { Worker, Viewer } from '@react-pdf-viewer/core';

const Home = () => {
  return (
    <div>
      <h1>PDF Viewer Example</h1>
        <Worker workerUrl={`https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js`}>
          <Viewer fileUrl={"/a.pdf"} />
        </Worker>
    </div>
  );
};

export default Home;

"use client";

import { useState, useEffect } from "react";
import { fabric } from "fabric";

const Component = () => {
  const [fabricCanvas, setFabricCanvas] = useState()

  useEffect(() => {
    // キャンバスの初期化処理
    const c = new fabric.Canvas("canvas", { // <- ここでエラー
      isDrawingMode: true, // 手書きモード
      width: 800,
      height: 300,
      backgroundColor: "#80beaf",
    });
    setFabricCanvas(c);
  }, []);

  // canvas要素に紐づけ
  return (
    <div>
      <canvas id="canvas" />
    </div>
  );
};

export default Component

"use client"

import { useEffect, useState } from 'react'
// import { fabric } from 'fabric' 
// TypeError: Cannot read properties of undefined (reading 'Canvas') というエラーがでる
// https://github.com/fabricjs/fabric.js/issues/8299
import * as fabric from 'fabric'

function App() {
  const [fabricCanvas, setFabricCanvas] = useState()

  // キャンバスの初期化処理
  // ref. https://github.com/citrus-candy/handwritten-app
  useEffect(() => {
    const canvas = new fabric.Canvas('fabric', {
      isDrawingMode: true,
      width: 500,
      height: 500,
    })

    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); // 明示的にPencilBrushを設定
    canvas.freeDrawingBrush.color = "red"; // 色を赤に設定

    setFabricCanvas(canvas)

    return () => {
        canvas.dispose();
      };  
  }, [])

  return (
    <div>
      <canvas id={'fabric'} />
    </div>
  )
}

export default App

"use client"
import React from 'react';
import { Document, Page, pdfjs} from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

const App = () => (
  <div>
    <Document file="/a.pdf">
      <Page pageNumber={4} renderTextLayer={false} renderAnnotationLayer={false}/>
    </Document>
  </div>
);

export default App

"use client"

import React, { useEffect, useState } from 'react';
import * as fabric from 'fabric';
import { Document, Page, pdfjs} from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

const Home = () => {
  const [fabricCanvas, setFabricCanvas] = useState();

  // キャンバスの初期化処理
  useEffect(() => {
    const canvas = new fabric.Canvas('fabric', {
      isDrawingMode: true,
      width: 500, // 必要に応じてPDFのサイズに合わせて調整
      height: 500, // 必要に応じてPDFのサイズに合わせて調整
    });

    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); // 明示的にPencilBrushを設定
    canvas.freeDrawingBrush.color = "red"; // 色を赤に設定

    setFabricCanvas(canvas);

    // この処理入れないと，きちんと終了されなくて，既に初期化されたキャンバスをもう一度初期化しちゃってエラーになる
    return () => {
      canvas.dispose();
    };
  }, []);

  return (
    <div style={{ position: 'relative' }}>
      <div style={{ position: 'absolute'}}>
        <Document file="/a.pdf">
          <Page pageNumber={4} renderTextLayer={false} renderAnnotationLayer={false}/>
        </Document>
      </div>
      <canvas id="fabric" style={{ position: 'absolute'}}/>
    </div>
  );
};

export default Home;

"use client";

import React, { useEffect, useState } from "react";
// npm instal fabric
import * as fabric from "fabric";
// npm install react-pdf
import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

const Home = () => {
  const [fabricCanvas, setFabricCanvas] = useState();

  // キャンバスの初期化処理
  useEffect(() => {
    const canvas = new fabric.Canvas("fabric", {
      isDrawingMode: true,
      width: 500, // 必要に応じてPDFのサイズに合わせて調整
      height: 500, // 必要に応じてPDFのサイズに合わせて調整
      /*
      backgroundImage: fabric.Image.fromURL(
        "http://localhost:3000/app_service.png",
        (img) => {
          img.scaleX = (canv.width * 0.5) / img.width;
          img.scaleY = (canv.height * 0.5) / img.height;

          canvas.backgroundImage = img;
          canv.renderAll();
        }
      ),
      */
    });

    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); // 明示的にPencilBrushを設定
    canvas.freeDrawingBrush.color = "red"; // 色を赤に設定

    // 画像を設定
    fabric.FabricImage.fromURL("http://localhost:3000/app_service.png").then(
      function (img) {
        canvas.backgroundImage = img;
        img.canvas = canvas;

        console.log(canvas.backgroundImage);
        canvas.renderAll();
      }
    );

    setFabricCanvas(canvas);

    return () => {
      canvas.dispose();
    };
  }, []);

  return (
    <>
      <div style={{ position: "relative" }}>
        <canvas id="fabric" style={{ position: "absolute" }} />
      </div>
    </>
  );
};

export default Home;

"use client";

import React, { useEffect, useState } from "react";
// npm instal fabric
import * as fabric from "fabric";
// npm install react-pdf
import { Document, Page, pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

const Home = () => {
  const [fabricCanvas, setFabricCanvas] = useState();
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  // キャンバスの初期化処理
  useEffect(() => {
    const img = new Image();
    img.src = "http://localhost:3000/app_service.png";

    const canvas = new fabric.Canvas("fabric", {
      isDrawingMode: true,
      width: img.width, // 必要に応じてPDFのサイズに合わせて調整
      height: img.height, // 必要に応じてPDFのサイズに合わせて調整
    });

    canvas.freeDrawingBrush = new fabric.PencilBrush(canvas); // 明示的にPencilBrushを設定
    canvas.freeDrawingBrush.color = "red"; // 色を赤に設定

    // 画像を設定
    fabric.FabricImage.fromURL("http://localhost:3000/app_service.png").then(
      function (img) {
        canvas.backgroundImage = img;
        img.canvas = canvas;
        canvas.width = img.width;
        canvas.height = img.height;
        canvas.renderAll();
      }
    );

    setFabricCanvas(canvas);

    return () => {
      canvas.dispose();
    };
  }, []);

  return (
    <>
      <div style={{ position: "relative" }}>
        <canvas id="fabric" style={{ position: "absolute" }} />
      </div>
    </>
  );
};

export default Home;