<!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. 【python】青果教务系统模拟登陆

    使用 python 的 selenium + chrome 来模拟登陆学校教务系统 完整代码传至 github,增加了一个自动识别验证码的功能,不过是用的别人的轮子,识别度也不高 这是需要手动输入验证 ...

  2. SpringSecurity自定义注解和处理器

    登录功能 添加一个配置类 @Configuration public class SecurityConfig extends WebSecurityConfigurerAdapter { @Reso ...

  3. CF166A Rank List 题解

    Content 有 \(n\) 个元素,第 \(i\) 个元素包含两个值 \(a_i,b_i\),按照以下规则排序: 如果对于 \(i\neq j\) 有 \(a_i\neq a_j\),则按照 \( ...

  4. Python3 day6面向对象

    http://www.cnblogs.com/alex3714/articles/5188179.html ====================生活中==================== 世界 ...

  5. 10分钟uniapp实现即时通讯，腾讯云IM的正确打开方式get

    官方的demo基本上覆盖了所有功能点 今天在使用uniapp开发即时通讯IM的时候遇到了瓶颈,便在uniapp的插件市场搜寻一波看看有没有成熟的轮子借鉴,终于发现了这个宝藏插件--"智密 - ...

  6. JAVA获取访问者IP地址

    pom <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomc ...

  7. 【LeetCode】426. Convert Binary Search Tree to Sorted Doubly Linked List 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 日期 题目地址:https://leetc ...

  8. 【剑指Offer】数组中出现次数超过一半的数字 解题报告（Python）

    [剑指Offer]数组中出现次数超过一半的数字 解题报告(Python) 标签(空格分隔): 剑指Offer 题目地址:https://www.nowcoder.com/ta/coding-inter ...

  9. idea使用教程-安装

    [1]将安装包进行解压-->选择固态盘符 [2]发送到桌面快捷方式,生成一个快捷方式 [3]打开: 选择主题: 先进入再说,免费试用: 创建一个项目: 选择JDK: 找到jetbrains-ag ...

  10. [Elasticsearch] ES聚合场景下部分结果数据未返回问题分析

    背景 在对ES某个筛选字段聚合查询,类似groupBy操作后,发现该字段新增的数据,聚合结果没有展示出来,但是用户在全文检索新增的筛选数据后,又可以查询出来, 针对该问题进行了相关排查. 排查思路 首 ...