基于cornerstone.js的dicom医学影像查看浏览功能

最近由于项目需求，需要医学影像.dcm文件的预览功能，功能完成后，基于原生Demo做一个开源分享。

10余年的青县网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同，自动调整青县建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“青县网站设计”,“青县网站推广”以来，每个客户项目都认真落实执行。

心急的小伙伴可以先看如下基于原生js的全部代码：

一、全部代码

DOCTYPE html>
<htmllang="en">

<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible" content="IE=edge">
    <metaname="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <scriptsrc="https://unpkg.com/hammerjs@2.0.8/hammer.js">script>
    <scriptsrc="https://unpkg.com/cornerstone-core@2.6.1/dist/cornerstone.js">script>
    <scriptsrc="https://unpkg.com/cornerstone-math@0.1.10/dist/cornerstoneMath.min.js">script>
    <scriptsrc="https://unpkg.com/cornerstone-wado-image-loader@4.1.3/dist/cornerstoneWADOImageLoader.bundle.min.js">script>
    <scriptsrc="https://unpkg.com/cornerstone-web-image-loader@2.1.1/dist/cornerstoneWebImageLoader.min.js">script>
    <scriptsrc="https://unpkg.com/cornerstone-tools@6.0.7/dist/cornerstoneTools.js">script>
    <scriptsrc="https://unpkg.com/dicom-parser@1.8.13/dist/dicomParser.min.js">script>
head>

<body>
    
    <divid="dicomImage" style="width: 512px;height: 512px;">div>

body>

<script>

    // 注册并挂载cornerstone及其cornerstoneTools，固定操作
    cornerstoneTools.external.cornerstone= cornerstone;
    cornerstoneTools.external.cornerstoneMath= cornerstoneMath;
    cornerstoneTools.external.Hammer= Hammer;
    cornerstoneWADOImageLoader.external.dicomParser= dicomParser;
    cornerstoneWADOImageLoader.external.cornerstone= cornerstone;
// imageId就是cornerstone要求的.dcm图片地址,例如：var imageId = "wadouri:http://127.0.0.1:6699/ctdcm1.dcm";
    var imageId= "wadouri: http://http://127.0.0.1:6699/media/dicm/0a291d1b12bd813e3796f14b329_haAJH2K.dcm";
// 初始化cornerstoneTools工具
    cornerstoneTools.init();
// 获取要用于加载图片的div区域
    var element= document.getElementById('dicomImage');
//激活获取到的用于图片加载的区域
    cornerstone.enable(element);
// 从cornerstoneTools库中获取窗宽,窗高工具
    const WwwcTool= cornerstoneTools.WwwcTool;
//添加获取到的窗宽,窗高工具
    cornerstoneTools.addTool(WwwcTool);
// 绑定工具操作功能到鼠标左键
    cornerstoneTools.setToolActive('Wwwc', {
        mouseButtonMask:1
    })
//使用loadAndCacheImage()方法加载并缓存图片，然后使用displayImage()方法显示图片。
    cornerstone.loadAndCacheImage(imageId).then(function (image) {
        cornerstone.displayImage(element, image);
    })

script>

html>

本文标题：基于cornerstone.js的dicom医学影像查看浏览功能
当前链接：http://cqcxhl.com/article/dsojjgi.html

重庆分公司，新征程启航

基于cornerstone.js的dicom医学影像查看浏览功能

一、全部代码

其他资讯