浏览器中输入chrome://flags,进入到experiments功能的开启,开启SharedArrayBuffer
使用功能之前需要开启浏览器的SharedArrayBuffer功能,在进行调试cornerstone的功能时,系统出现了bug
调试代码为:
<script lang="ts" setup>
import {
Enums, getRenderingEngine,
RenderingEngine, Types, volumeLoader,
} from "@cornerstonejs/core";
import createImageIdsAndCacheMetaData from "../../utils/helpers/createImageIdsAndCacheMetaData";
import {addDropdownToToolbar, initDemo, setTitleAndDescription} from "@/utils/helpers";
import {addTool, StackScrollMouseWheelTool, ToolGroupManager, ZoomTool,Enums as csToolsEnums} from "@cornerstonejs/tools";
import {onMounted} from "vue";
onMounted(()=>{
// ======== Set up page ======== //
const { MouseBindings } = csToolsEnums;
const { ViewportType } = Enums;
const renderingEngineId = 'myRenderingEngine';
const viewportId = 'PROSTATE_X';
// Define a unique id for the volume
const volumeName = 'PROSTATE_VOLUME'; // Id of the volume less loader prefix
const volumeLoaderScheme = 'cornerstoneStreamingImageVolume'; // Loader id which defines which volume loader to use
const volumeId = `${volumeLoaderScheme}:${volumeName}`; // VolumeId with loader id + volume id
const content = document.getElementById('content');
console.log(content)
const element = document.createElement('div');
element.id = 'cornerstone-element';
element.style.width = '500px';
element.style.height = '500px';
element.oncontextmenu = () => false;
content.appendChild(element);
/**
* Runs the demo */ async function run(){
// Init Cornerstone and related libraries
await initDemo();
addTool(StackScrollMouseWheelTool);
addTool(ZoomTool);
// Using a oblique acquired image to demonstrate the orientation of the volume
// in default (acquisition plane mode) const imageIds = await createImageIdsAndCacheMetaData({
StudyInstanceUID:
'1.3.6.1.4.1.14519.5.2.1.7009.2403.871108593056125491804754960339',
SeriesInstanceUID:
'1.3.6.1.4.1.14519.5.2.1.7009.2403.367700692008930469189923116409',
wadoRsRoot: 'https://d33do7qe4w26qo.cloudfront.net/dicomweb',
});
// create toolGroup
const toolGroup = ToolGroupManager.createToolGroup('myToolGroup');
toolGroup.addTool(StackScrollMouseWheelTool.toolName);
toolGroup.addTool(ZoomTool.toolName);
toolGroup.setToolActive(StackScrollMouseWheelTool.toolName);
toolGroup.setToolActive(ZoomTool.toolName, {
bindings: [
{
mouseButton: MouseBindings.Secondary,
},
],
});
toolGroup.addViewport(viewportId, renderingEngineId);
// Instantiate a rendering engine
const renderingEngine = new RenderingEngine(renderingEngineId);
// Create a stack viewport
const viewportInput: Types.PublicViewportInput = {
viewportId,
type: ViewportType.ORTHOGRAPHIC,
element,
defaultOptions: {
orientation: Enums.OrientationAxis.SAGITTAL,
background: <Types.Point3>[0.2, 0, 0.2],
},
};
renderingEngine.enableElement(viewportInput);
// Get the stack viewport that was created
const viewport = <Types.IVolumeViewport>(
renderingEngine.getViewport(viewportId)
);
// Define a volume in memory
const volume = await volumeLoader.createAndCacheVolume(volumeId, {
imageIds,
});
// Set the volume to load
volume.load();
// Set the volume on the viewport
await viewport.setVolumes([{volumeId}]);
// Render the image
viewport.render();
}
run();
})
</script>
<template>
<div id="content">
111
</div>
</template>
<style scoped>
</style>
在下列代码出现问题
// Define a volume in memory
const volume = await volumeLoader.createAndCacheVolume(volumeId, {
imageIds,
});
问题为:
Error: SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/
简单来说就是由于JavaScript是单线程的,为了让浏览器更好利用CPU的资源,便引入了Web Workers这个API,提供了多线程的使用方式
默认情况下线程之间的数据是隔离,若想要使用其他线程的数据,必须复制过来。为了解决这个问题,就出现了SharedArrayBuffer这个对象
让线程之间的数据交互效率更高。
解决方法:在vite.config.js中设置headers,注意这里启动地址不能为ip:5173/否则会报错该url不安全,忽略该headers
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
server:{
//本地运行配置
host:"localhost",
port:5173,
cors:true, //默认启用并运行所有源
open:true, //在服务器启动时自动在浏览器中打开应用程序
devtool:"source-map", //是否为开发构建启用生产源映射
headers:{ //为每个请求添加自定义头
"Cross-Origin-Opener-Policy":"same-origin",//保护源站免受攻击
"Cross-Origin-Embedder-Policy":"require-corp"//保护源站免受侵害
},}
})
上述案例成功渲染结果为: