cornerstonejs / cornerstoneWADOImageLoader

[DEPRECATED] DICOM WADO Image Loader for the cornerstone library
MIT License
284 stars 266 forks source link

about load index.worker.min.worker.js #461

Closed robustNan closed 2 years ago

robustNan commented 2 years ago

When I use cornerstone-wado-image-loader in my vue project, index.worker.min.worker.js is loaded from http://localhost:8080/js/index.worker.min.worker.js, which should is the file in cornerstone-wado-image-loader/dist/dynamic-import. Now, I can only create the js directory in the root directory and copy index.worker.min.worker.js into it, otherwise the browser will report an error (Uncaught SyntaxError: Unexpected token '<' (at index.worker.min.worker.js:1:1))

image

image

In addition, if my maxWebWorkers property setting is greater than 3, the browser will crash/(ㄒoㄒ)/~~

My vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')

const DIST_DIR = path.resolve(__dirname, 'dist')

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('babel-loader')
      .test(/\.js|jsx$/)
      .use('babel-loader')
      .loader('babel-loader')
      .end()

    config.resolve.alias.set('cornerstone-wado-image-loader', 'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js')
  },
  devServer: {
    hot: true,
    proxy: {
      [process.env.VUE_APP_DICOM_WEB]: {
        // target: 'https://d1qmxk7r72ysft.cloudfront.net',
        target: 'http://192.168.94.27:8042',
        changeOrigin: true,
        pathRewrite: path => path.replace(/^\/dicom/, ''),
      },
    },
    headers: {
      'Cross-Origin-Embedder-Policy': 'require-corp',
      'Cross-Origin-Opener-Policy': 'same-origin',
    },
  },
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'node_modules/cornerstone-wado-image-loader/dist/dynamic-import'),
            to: DIST_DIR,
          },
        ],
      }),
    ],
  },
}

My CornerstonePractice.vue

import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader/dist/dynamic-import/cornerstoneWADOImageLoader.min.js'
...
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
cornerstoneWADOImageLoader.configure({
  useWebWorkers: true,
  decodeConfig: {
    convertFloatPixelDataToInt: false,
  },
  // beforeSend
})

const config = {
  maxWebWorkers: Math.min(navigator.hardwareConcurrency, 3),
  // maxWebWorkers: navigator.hardwareConcurrency || 1,
  startWebWorkersOnDemand: false,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: true,
      strict: false,
    },
  },
}

cornerstoneWADOImageLoader.webWorkerManager.initialize(config)
zhoualibaba commented 2 years ago

@robustNan Have you solved this problem? I have the same problem.

robustNan commented 2 years ago

@robustNan Have you solved this problem? I have the same problem.

看你名字应该是中国人,我就写中文吧。把 DIST_DIR 定义到 'dist/js',因为它是从根目录下的js目录中获取work文件,所以这里要把npm包里的work文件复制到打包目录下名称为js的目录中

zhoualibaba commented 2 years ago

感谢您的回复,问题解决了。

wolixx commented 1 year ago

您好,我也遇到这个问题,还是不太明白楼上所说的意思,我们可以交换联系方式交流一些吗,非常感谢!

zhoualibaba commented 1 year ago

@wolixx 可以,联系方式可以发我邮箱