// 首先下载依赖
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 = dicomParsercornerstoneWADOImageLoader.external.cornerstone = cornerstone;cornerstoneWADOImageLoader.configure({beforeSend: function (xhr) {},});let urlurl = "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>