React中使用imjoy-core调用ImageJ.JS API报错：插件未找到

问题背景 #

在React项目中通过imjoy-core连接ImJoy API，尝试调用ImageJ.JS执行图像处理时遇到报错：Uncaught (in promise) Plugin not found: ImageJ.JS，日志输出null。但调用Jupyter-Engine-Manager插件可正常运行。尝试过传入{src:"https://ij.imjoy.io/"}参数、替换getPlugin为createWindow/getWindow，甚至用纯JS+HTML引入imjoy-loader.js调用loadImJoyCore，均未解决。但在ij.imjoy.io的开发者工具中用window.imjoy实例调用getPlugin("ImageJ.JS")可以正常运行，应用当前在localhost环境。

相关代码：

import * as imjoyCore from 'imjoy-core'

export const consoleImjoyCore = async () => {
  const imjoy = new imjoyCore.ImJoy({
    imjoy_api: {}
  })

  console.log('imjoy', imjoy)

  imjoy.start({ workspace: 'default' }).then(async () => {
    const ij = await imjoy.api.getPlugin("ImageJ.JS")
    console.log(ij);
  })
}

解决方案 #

1. 手动注册ImageJ.JS插件 #

本地环境下ImJoy Core默认的插件发现机制无法自动识别ImageJ.JS，需显式注册插件：

import * as imjoyCore from 'imjoy-core'

export const consoleImjoyCore = async () => {
  const imjoy = new imjoyCore.ImJoy({
    imjoy_api: {}
  })

  // 等待imjoy启动完成
  await imjoy.start({ workspace: 'default' })
  // 手动注册ImageJ.JS插件
  await imjoy.api.registerPlugin({
    name: "ImageJ.JS",
    src: "https://ij.imjoy.io/",
    type: "web-worker" // 若需要可视化界面，可改为"window"类型
  })
  // 注册后获取插件实例
  const ij = await imjoy.api.getPlugin("ImageJ.JS")
  console.log(ij);
}

2. 配置跨域权限 #

localhost环境下可能存在跨域限制，可在imjoy实例初始化时配置允许跨域：

const imjoy = new imjoyCore.ImJoy({
  imjoy_api: {},
  settings: {
    allow_origin: "*"
  }
})

如果是React开发环境，还可以在package.json中添加代理配置：

"proxy": "https://ij.imjoy.io/"

3. 纯HTML+JS环境的正确用法 #

若使用纯JS+HTML，需确保等待ImJoy Core加载完成后再执行注册操作：

<script src="https://lib.imjoy.io/imjoy-loader.js"></script>
<script>
  async function runImageJ() {
    const imjoy = await loadImJoyCore()
    await imjoy.start({ workspace: 'default' })
    await imjoy.api.registerPlugin({
      name: "ImageJ.JS",
      src: "https://ij.imjoy.io/"
    })
    const ij = await imjoy.api.getPlugin("ImageJ.JS")
    console.log(ij)
  }
  runImageJ()
</script>

原因说明 #

• ij.imjoy.io环境中已预注册ImageJ.JS插件，因此直接调用getPlugin可成功；本地环境无预注册，需手动指定插件源。
• 本地开发环境的跨域策略可能阻止ImJoy加载外部插件资源，需显式配置权限或代理。

内容的提问来源于stack exchange，提问作者Elias Nunes