Reactのコンポーネント内でCDNのライブラリを使用する方法を教えてください

Question

前提・実現したいこと

React.jsのコンポーネント内でOpenCV.jsのcvインスタンスにアクセスしたいのですが、CDNライブラリをコンポーネント内で使用する方法がわかりません。

コンポーネント内でCDNを呼び出す方法について以下のような質問もありましたが、こちらはスタイルの呼び出しはされていましたがjsの呼び出しはされていませんでした。

https://teratail.com/questions/151187

React.jsのコンポーネント内でCDNライブラリのjsファイルの呼び出し、インスタンスへのアクセスは可能でしょうか？
可能な場合、実現方法を教えてください。

試したこと

以下のようにimportを行うとエラーが発生しました。

import cv from 'https://docs.opencv.org/4.5.3/opencv.js'

Module not found: Can't resolve 'https://docs.opencv.org/4.5.3/opencv.js' in '/~~~/src'

また、public/index.htmlにscriptタグで読み込むようにすると、コンポーネントではインスタンスにアクセスができませんでした。

<script src="https://docs.opencv.org/4.5.3/opencv.js"></script>

補足情報（FW/ツールのバージョンなど）

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",

Answer 1

index.html の script タグで読み込むと cv という名前のグローバル変数ができるので、

<script src="https://docs.opencv.org/4.5.3/opencv.js"></script>

それを グローバルオブジェクト (window) のプロパティとしてアクセスすれば良いのでは。
参考: reactjs - Call external Javascript function from react components - Stack Overflow

const cv = window.cv;

さんぷる

import { useState, useRef } from 'react';

const cv = window.cv;

function App() {
  const [image, setImage] = useState(null);
  const [value, setValue] = useState(50);
  const imgRef = useRef(null);
  const canvasRef = useRef(null);

  const onChangeFile = (event) => {
    if (event.target.files && event.target.files[0]) {
      setImage(URL.createObjectURL(event.target.files[0]));
    }
  };

  const onChangeValue = (event) => {
    setValue(event.target.value);
    updateCanvas(event.target.value);
  };

  const updateCanvas = (value) => {
    if (!imgRef.current.complete || imgRef.current.naturalHeight === 0) {
      return;
    }
    const src = cv.imread(imgRef.current);
    const dst = new cv.Mat();
    cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY);
    cv.cvtColor(dst, dst, cv.COLOR_GRAY2RGBA);
    cv.addWeighted(src, value / 100, dst, 1 - value / 100, 0.0, dst, -1);
    cv.imshow(canvasRef.current, dst);
    src.delete();
    dst.delete();
  };

  return (
    <>
      <h1>OpenCV Test</h1>
      <div>
        <input type='file' onChange={onChangeFile} />
        <input type='range' min={0} max={100} value={value} onChange={onChangeValue} />
        {value}
      </div>
      <div>
        <img src={image} ref={imgRef} onLoad={() => updateCanvas(value)} />
        <span style={{ display: 'inline-block', width: '20px' }}></span>
        <canvas ref={canvasRef} />
      </div>
    </>
  );
}

export default App;

Comments

[退会済みユーザー]

ご回答ありがとうございます。

グローバル変数にアクセスする方法があるんですね、大変勉強になりました！
ご提示いただいたソースも自身の環境で動作することが確認できました！

迅速、正確なご回答ありがとうございました。