cornerstonejs引入uniapp的方法

巴巴托斯不摸鱼

已于 2022-12-06 17:16:09 修改

阅读量423

点赞数

文章标签： uni-app 前端 vue.js javascript

于 2022-12-06 17:14:54 首次发布

本文链接：https://blog.csdn.net/weixin_67106788/article/details/128206271

版权

国内资源少，且没有一篇是关于uniapp引入的，几经周折查阅，总算是解决运行成功

首先，网上大多数教程，包括官方文档都是用的在线js引入，且原生居多

所以笨方法，在线js打开后，复制网页代码，在uniapp项目根新建一个文件夹，名字自取

一共是这七个常用包

https://unpkg.com/hammerjs@2.0.8/hammer.js

https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js

https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js

https://unpkg.com/cornerstone-wado-image-loader@4.3.0/dist/cornerstoneWADOImageLoader.bundle.min.js

https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js

https://unpkg.com/cornerstone-tools@6.0.8/dist/cornerstoneTools.js

https://unpkg.com/dicom-parser@1.8.19/dist/dicomParser.min.js

uniapp模块或者全局引入，名字一定要对应取对

// 导入包
   import cornerstone from '../../cornedtonejs/cornerstone.js';
   import cornerstoneTools from '../../cornedtonejs/cornerstoneTools.js';
   import cornerstoneMath from '../../cornedtonejs/cornerstoneMath.js';
   import cornerstoneWADOImageLoader from '../../cornedtonejs/cornerstoneWADOImageLoader.js';

//此包用于页面图片，后缀.dcm可以不用
// import cornerstoneWebImageLoader from

'../../cornedtonejs/cornerstoneWebImageLoader.js';
import dicomParser from '../../cornedtonejs/dicomParser.js';
import hammer from '../../cornedtonejs/hammer.js';

之后就与网上差不多了，开光，重构

cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
           cornerstoneWADOImageLoader.external.dicomParser = dicomParser;

           cornerstoneTools.external.cornerstone = cornerstone;
           cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
           cornerstoneTools.external.Hammer = Hammer;
           // // //初始化
           cornerstoneTools.init();
           let element = document.querySelector("#dicomImage");
           let imageId = "wadouri:xxxxxxxxxxx.dcm";

           cornerstone.enable(element, { //激活渲染元素, 没有将会报错 --element not enabled
           colormap: "" //这个对象可以不传，但你改变颜色后，重置时不传这个元素会报错 -- options.colormap is not read prototype
           });



           cornerstone.loadAndCacheImage(imageId).then(img => { //加载dcm文件并缓存
           cornerstone.displayImage(element, img); //将解析的信息渲染到某个元素上
           });