vue 使用cornerstone解析 .dcm 文件

// 首先下载依赖
npm install --save cornerstone-core cornerstone-math cornerstone-tools hammerjs cornerstone-web-image-loader
下载之后再package.json中可以看到最后图片的依赖

// 下面是完成的组件代码
<template>
    <div id="dicom_canvas" ref='dicom_canvas' class="imgContainer"></div>
</template>
     
<script>

import cornerstone from "cornerstone-core"
import * as  dicomParser from 'dicom-parser'
import * as  cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'

export default {

    name: "editAnnotation",
    props: {
        img: {
            type: String,
            required: true
        },
    },
    data() {
        return {
            imgSrc: "",
        }

    },
    watch: {
        img: {
            handler(val) {
                if (val !== this.imgSrc) {
                    this.imgSrc = val === null ? "" : val;
                }
            },
            immediate: true,
        },
    },
    mounted() {
        console.log("初始化")
        this.$nextTick(() => {
            // 初始化
            this.initCornerstoneTools()
        })

    },

    methods: {
        // 初始化标注工具

        initCornerstoneTools() {

            var element = document.getElementById('dicom_canvas');
            cornerstone.enable(element);
            cornerstoneWADOImageLoader.external.dicomParser = dicomParser
            cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

            cornerstoneWADOImageLoader.configure({
                beforeSend: function (xhr) {
                },
            });

            let url
            url = "wadouri:" + this.imgSrc;
            this.loadAndViewImage(url);

        },
        loadAndViewImage(imageId) {
            var element = document.getElementById('dicom_canvas');
            try {
                cornerstone.loadAndCacheImage(imageId).then((image) => {
                    var viewport = cornerstone.getDefaultViewportForImage(element, image);
                    cornerstone.displayImage(element, image, viewport);

                }, function (err) {
                    throw err;
                });
            }
            catch (err) {
                throw err;
            }
        },



    }

}

</script>
    
    
    
<style lang="scss" scoped>
.imgContainer {
    width: 100%;
    height: 100%;
}
</style>