vue医学图像处理包cornerstone.js基本使用

<template>
  <div id="cornerstone-element" style="width: 100%; height: 600px;"></div>
</template>
 
<script>
export default {
  name: 'CornerstoneViewer',
  mounted() {
    this.loadImage();
  },
  methods: {
    loadImage() {
      // 确保Cornerstone已经加载
      cornerstone.enable(this.$el);
 
      // 加载DICOM图像
      const imageId = 'yourImageIdHere'; // 替换为实际的imageId
      cornerstone.loadImage(imageId).then(image => {
        // 将加载的图像显示在指定的DOM元素中
        cornerstone.displayImage(this.$el, image);
      });
    }
  }
};
</script>
 
<style scoped>
/* 样式按需添加，确保div元素正确显示 */
</style>

在这个例子中，我们首先在mounted钩子中调用loadImage方法来加载并显示一个DICOM图像。在loadImage方法中，我们使用cornerstone.enable来启用特定DOM元素的Cornerstone功能，然后使用cornerstone.loadImage来加载图像资源，并在加载完成后通过cornerstone.displayImage将其显示出来。需要注意的是，你需要替换yourImageIdHere为实际的图像ID，并确保Cornerstone.js已经被正确引入到你的项目中。