<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>DicomTest</title>

    <link rel="stylesheet" href="css/bootstrap.min.css">

    <link rel="stylesheet" href="css/cornerstone.min.css">

    <script src="js/cornerstone.min.js"></script>

    <script src="js/dicomParser.min.js"></script>

    <script src="Imageloader/cornerstoneWADOImageLoaderCodecs.js"></script>

    <script src="data:imageloader/cornerstoneWADOImageLoaderWebWorker.js"></script>

    <script src="data:imageloader/cornerstoneWADOImageLoader.js"></script>

</head>

<body>

    <div class="container">

        <div class="row">

            <input class="col-sm-8" type="file" id="dcmfile">

            <button class="col-sm-3 btn" type="button" id="downloadAndView">加载到窗口中</button>

        </div>

        <div id="loadProgress">医疗影像Dicom解析加载</div>

        <div style="width:512px; height:512px; position:relative; color:white; display:inline-block; border-style:solid; border-color:black;"

            oncontextmenu="return false" class='disable-selection noIbar' unselectable='on'

            onselectstart='return false;' onmousedown='return false;'>

            <div id="dicomImage" style="width:512px;height:512px;top:0px;left:0px; position:absolute">

            </div>

        </div>

    </div>

    <script type="text/javascript">

        var loaded = false;

        cornerstoneWADOImageLoader.external.cornerstone = cornerstone;

        // 加载和显示图像

        function loadAndViewImage(imageId) {

            var element = document.getElementById('dicomImage');

            cornerstone.loadAndCacheImage(imageId).then(function (image) {

                var viewport = cornerstone.getDefaultViewportForImage(element, image);

                cornerstone.displayImage(element, image, viewport);

            }, function (err) {

                alert(err);

                console.log(err);

            });

        }

        var element = document.getElementById('dicomImage');

        cornerstone.enable(element);

        // 监听 downloadAndView 按钮 拼接url 调用 loadAndViewImage 函数

        document.getElementById('downloadAndView').addEventListener('click', function (e) {

            const file = document.getElementById('dcmfile').files[0];

            const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);

            // 调用这个函数加载像,和激活工具

            loadAndViewImage(imageId);

        });

        // Dicom 加载 进度

        cornerstone.events.addEventListener('cornerstoneimageloadprogress', function (event) {

            const eventData = event.detail;

            const loadProgress = document.getElementById('loadProgress');

            loadProgress.textContent = `Image Load Progress: ${eventData.percentComplete}%`;

        });

    </script>

</body>

</html>

上面代码中需要 引入的JS库，均来自GitHub开源项目cornerstone.js

运行后，点击左上角按钮选择dcm文件进行load 可显示到div中

使用医学影像开源库cornerstone.js解析Dicom图像显示到HTML中的更多相关文章

  1. iOS5系统API和5个开源库的JSON解析速度测试

    iOS5系统API和5个开源库的JSON解析速度测试 iOS5新增了JSON解析的API,我们将其和其他五个开源的JSON解析库进行了解析速度的测试,下面是测试的结果和工程代码附件. 我们选择的测试对 ...

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

    最近由于项目需求,需要医学影像.dcm文件的预览功能,功能完成后,基于原生Demo做一个开源分享. 心急的小伙伴可以先看如下基于原生js的全部代码: 一.全部代码 <!DOCTYPE html& ...

  3. 二维码解析：使用 JavaScript 库reqrcode.js解析二维码

    上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...

  4. Nuxt.js logoVue.js 后端渲染开源库 Nuxt.js

    Nuxt.js 是一个通过 Vue 用于服务端渲染的简单框架,灵感来自 Next.js. 目前尚处于开发阶段,1.0 版本即将发布 1 分钟视频演示 Nuxt 基于 ES2015,这使得代码有着更愉快 ...

  5. 35 个最好用的 Vue 开源库

    35 个最好用的 Vue 开源库 Vue.js 是一个非常易用的渐进式 JavaScript 框架,用于构建用户界面. 1.Vue Dark Mode Vue.js 的一个极简主义的深色设计系统.它提 ...

  6. 发布开源库到JCenter所遇到的一些问题记录

    这周末自己瞎折磨了下,如何发布开源库到 JCenter,然后这过程中碰到了一些问题,在此记录分享一下 本篇是基于上一篇:教你一步步发布一个开源库到 JCenter 介绍的流程.步骤中所遇到的问题,所以 ...

  7. AndroidStudio怎样导入library项目开源库

    AndroidStudio是一款非常强大的android程序开发软件,在里面集成了几乎所有android开发中需要使用的工具,编译.运行.打包.开发.调试等功能一应俱全,可以使用起来非常方便. 今天要 ...

  8. Maven系列（二） -- 将开源库上传到maven仓库私服

    前言 之前简单说了下Maven的搭建,现在跟大家说一下如何将自己的aar传到我们新搭建的maven仓库里面,接下来我们就从最基本的新建一个library开始讲述整个流程,话不多说,让我们把愉快的开始吧 ...

  9. C#开发PACS医学影像处理系统(六)：加载Dicom影像

    对于一款软件的扩展性和维护性来说,上层业务逻辑和UI表现一定要自己开发才有控制权,否则项目上线之后容易被掣肘, 而底层图像处理,我们不需要重复造轮子,这里推荐使用fo-dicom,同样基于Dicom3 ...

随机推荐

  1. pwnable_start

    第一次接触这种类型的题,例行检查一下 题目是32位 没有开启nx保护可以通过shellocode来获得shell 将题目让如ida中 由于第一次碰到这种题,所以我会介绍的详细一点, 可以看到程序中调用 ...

  2. LuoguP7859 [COCI2015-2016#2] GEPPETTO 题解

    Content 有 \(n\) 个数 \(1\sim n\).你需要在其中选若干个数.但是还有 \(m\) 个限制,第 \(i\) 个限制格式为 \(a_i\) 不能和 \(b_i\) 一起选.问你一 ...

  3. 网络编程socket 结合IO多路复用select; epool机制分别实现单线程并发TCP服务器

    select版-TCP服务器 1. select 原理 在多路复用的模型中,比较常用的有select模型和epoll模型.这两个都是系统接口,由操作系统提供.当然,Python的select模块进行了 ...

  4. JavaWebServle执行流程解析

    Servlet Servlet 1.定义: 注:servlet版本2.5 Servlet是Java的一个类.既然是一个类.那必然要遵循一定的规范.如下所示. a.必须继承 javax.servlet. ...

  5. Linux下使用JDK11部署Nacos启动报错：Could not find or load main class

    Linux下使用JDK11部署Nacos 错误日志 /nacos/jdk-11.0.12/bin/java -server -Xms2g -Xmx2g -Xmn1g -XX:MetaspaceSize ...

  6. JAVA字符串拼接操作规则说明

    1.常量与常量的拼接结果在常量池,原理是编译期优化 public void test1() { String s1 = "a" + "b" + "c& ...

  7. 【九度OJ】题目1445：How Many Tables 解题报告

    [九度OJ]题目1445:How Many Tables 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1445 题目描述: ...

  8. 【LeetCode】671. Second Minimum Node In a Binary Tree 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 找出所有值再求次小值 遍历时求次小值 日期 题目地址 ...

  9. Jenkins+Sonar质量门禁【实践篇-maven版】

    Jenkins+Sonar质量门禁[实践篇-maven版] 配置文档百度挺多的,就不展开来了 首先很遗憾的告诉大家,maven版做不了质量门禁!只能扫描!!!     就我们公司项目里,jenkins ...

  10. CNN、RNN

    卷积神经网络有三个结构上的特性:局部连接,权重共享以及空间或时间上的次采样.这些特性使得卷积神经网络具有一定程度上的平移.缩放和扭曲不变性. CNN由可学习权重和偏置的神经元组成.每个神经元接收多个输 ...