13518219792
最近由于项目需求，需要医学影像.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>
