<!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. 在【自定义列】中编辑简单运算公式（Power Query 之 M 语言）

    数据源: "品名"."数量"."单价"三列 目标: 计算销售单价(单价*1.2) 解决方案: 在[自定义列]中使用乘法四则运算 步骤: 打开 ...

  2. AtCoder Beginner Contest 184 题解

    AtCoder Beginner Contest 184 题解 目录 AtCoder Beginner Contest 184 题解 A - Determinant B - Quizzes C - S ...

  3. CF934A A Compatible Pair 题解

    Content 有两个数列 \(A\) 和 \(B\),\(A\) 数列里面有 \(n\) 个元素,\(B\) 数列里面有 \(m\) 个元素,现在请从 \(A\) 数列中删除一个数,使得 \(A\) ...

  4. 使用iframe实现上下窗口结构及登录页全窗口展示Demo

    iframe.html 首页 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  5. js中字符串和数组的常用转换处理方法

    1.split("分割条件(正则表达式或者字符)") 字符串 ==> 数组 默认返回数组 (1) 将单词分割为字符 "hello".split(" ...

  6. C++之递归遍历数组

    倒序输出 源码 void print_arr_desc(int arr[], unsigned int len) { if (len) { std::cout << "a[&qu ...

  7. 【LeetCode】556. Next Greater Element III 解题报告（Python）

    [LeetCode]556. Next Greater Element III 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人 ...

  8. spoj - ACTIV - Activities

    ACTIV - Activities Ana likes many activities. She likes acrobatics, alchemy, archery, art, Arabic da ...

  9. 「HAOI2016」找相同字符

    知识点: SA,线段树,广义 SAM 原题面 Loj Luogu 给定两字符串 \(S_1, S_2\),求出在两字符串中各取一个子串,使得这两个子串相同的方案数. 两方案不同当且仅当这两个子串中有一 ...

  10. 强强联袂！腾讯云TDSQL与国双战略签约，锚定国产数据库巨大市场

    日前,腾讯云计算(北京)有限责任公司与北京国双科技有限公司签署了<国产数据库产品战略合作协议>,双方将在数据库技术方面展开深度合作,通过分布式交易型数据库的联合研发.产品服务体系建设.品牌 ...