<!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. java多线程6：ReentrantLock

    下面看下JUC包下的一大并发神器ReentrantLock,是一个可重入的互斥锁,具有比synchronized更为强大的功能. ReentrantLock基本用法 先来看一下ReentrantLoc ...

  2. 带你尝鲜LiteOS 组件EasyFlash

    摘要:EasyFlash是一个开源的轻量级嵌入式闪存库. 本文分享自华为云社区<LiteOS组件尝鲜-玩转EasyFlash>,作者:Lionlace . 基本介绍 EasyFlash是一 ...

  3. mysql--求中位数

    第一种求中位数方法: /* 第一步:添加一个正序和反序 第二步:当列表数目为奇数的时候,列表选出的情况,当列表为偶数的时候列表的情况 第三步:统筹奇数和偶数时中位数 */ select sum(Mat ...

  4. [BUUCTF]PWN——0ctf_2017_babyheap

    0ctf_2017_babyheap 附件 步骤: 例行检查,64位程序,保护全开 本地试运行一下,看看大概的情况,经典的堆题的菜单 main函数 add() edit() delete() show ...

  5. Google Earth Engine 批量点击RUN任务，批量取消正在上传的任务

    本文内容参考自: https://blog.csdn.net/qq_21567935/article/details/89061114 https://blog.csdn.net/qq_2156793 ...

  6. 【JAVA今法修真】 第六章 天道无情，锁定乾坤

    您好,我是南橘,万法仙门的掌门,刚刚从九州世界穿越到地球,因为时空乱流的影响导致我的法力全失,现在不得不通过这个平台向广大修真天才们借去力量.你们的每一个点赞,每一个关注都是让我回到九州世界的助力,兄 ...

  7. 【LeetCode】1071. Greatest Common Divisor of Strings 解题报告（Python & C++）

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

  8. 【LeetCode】393. UTF-8 Validation 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/utf-8-va ...

  9. docker学习：docker命令

    帮助命令 自验证 docker version 详情信息 docker info 获取帮助 docker --help 镜像命令 列出本例主机上的镜像 docker images [OPTIONS] ...

  10. SpringCloud创建Config读取本地配置

    1.说明 Config Server获取配置支持的方式很多, 包括Git仓库(github/gitee等),任何与JDBC兼容的数据库, Subversion,Hashicorp Vault,Cred ...