dicom查看器添加工具

我正在为我的客户端做一个Web应用程序。我们有一个问题。我想在客户端显示dicom图像。 现在我们已经使用https://github.com/ivmartel/dwv。 我HV试图dicom查看器添加工具

HTML文件添加CSS和工具栏

<!DOCTYPE html> 

<html>

<head>

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dwv-0.22.0.min.js"></script>

<style type="text/css" >

body { background: #252525; color: #fff; }

button {

margin: 5px; padding: 10px 10px;

border: 0 none; border-radius: 4px;

font-size: 14px; font-weight: 600;

color: #fff; background-color: #444; }

button:hover { background-color: #555; }

button:disabled { background-color: #08b; }

.toolbar { font: 14px arial, sans-serif; margin-bottom: 5px; text-align: center; }

.wl-button, .reset-button { margin-right: 5px; }

.layerContainer { margin: auto; text-align: center; }

.imageLayer { left: 0px; }

</style>

<script type="text/javascript">

window.onload = function() {

var imgUrl = document.getElementById("imageHidden").src;

dwv.gui.getElement = dwv.gui.base.getElement;

dwv.gui.displayProgress = function(percent) {

};

// create the dwv app

var app = new dwv.App();

// initialise with the id of the container div

app.init({

"containerDivId": "dwv",

"tools": ["WindowLevel"], // or try "ZoomAndPan"

});

// load dicom data

app.loadURLs([imgUrl]);

var range = document.getElementById("sliceRange");

range.min = 0;

app.addEventListener("load-end", function() {

range.max = app.getImage().getGeometry().getSize().getNumberOfSlices() - 1;

});

app.addEventListener("slice-change", function() {

range.value = app.getViewController().getCurrentPosition().k;

});

range.oninput = function() {

var pos = app.getViewController().getCurrentPosition();

pos.k = this.value;

app.getViewController().setCurrentPosition(pos);

}

};

$(document).ready(function() {

// base function to get elements

});

</script>

</head>

<body>

<img id="imageHidden" src="<?php echo $imageUrl; ?>" hidden="true">

<div id="dwv">

<!-- Layer Container -->

<div class="layerContainer">

<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>

</div><!-- /layerContainer -->

</div><!-- /dwv -->

<input type="range" id="sliceRange" value="0">

</body>

</html>

只有这上面的代码显示图像之前。当我添加CSS和工具栏js文件,它显示了添加工具栏文件

<!DOCTYPE html> 

<html>

<head>

<title>DICOM Web Viewer</title>

<meta charset="UTF-8">

<meta name="description" content="DICOM Web Viewer (DWV) static version">

<meta name="keywords" content="DICOM,HTML5,JavaScript,medical,imaging,DWV">

<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>assets/dicom/css/style.css">

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/viewers/static/appgui.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/viewers/static/applauncher.js"></script>

<style type="text/css" >

body { background-color: #222; color: white; font-size: 80%; }

#pageHeader h1 { display: inline-block; margin: 0; color: #fff; }

#pageHeader a { color: #ddf; }

#pageHeader .toolbar { display: inline-block; float: right; }

.toolList ul { padding: 0; }

.toolList li { list-style-type: none; }

#pageMain { position: absolute; height: 92%; width: 99%; bottom: 5px; left: 5px; background-color: #333; }

.infotl { text-shadow: 0 1px 0 #000; }

.infotc { text-shadow: 0 1px 0 #000; }

.infotr { text-shadow: 0 1px 0 #000; }

.infocl { text-shadow: 0 1px 0 #000; }

.infocr { text-shadow: 0 1px 0 #000; }

.infobl { text-shadow: 0 1px 0 #000; }

.infobc { text-shadow: 0 1px 0 #000; }

.infobr { text-shadow: 0 1px 0 #000; }

.dropBox { margin: 20px; }

.ui-icon { zoom: 125%; }

.tagsTable tr:nth-child(even) { background-color: #333; }

.drawList tr:nth-child(even) { background-color: #333; }

button, input, li, table { margin-top: 0.2em; }

li button, li input { margin: 0; }

.history_list { width: 100%; }

</style>

<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>assets/dicom/ext/jquery-ui/themes/ui-darkness/jquery-ui-1.12.1.min.css">

<style type="text/css" >

.ui-widget-content { background-color: #222; background-image: url();}

</style>

<!-- Third party (dwv) -->

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/modernizr/modernizr.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/i18next/i18next.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/i18next/i18nextXHRBackend.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/i18next/i18nextBrowserLanguageDetector.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/konva/konva.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/magic-wand/magic-wand.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/jszip/jszip.min.js"></script>

<!-- Third party (viewer) -->

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/jquery/jquery-2.1.4.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/jquery-ui/jquery-ui-1.12.1.min.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/ext/flot/jquery.flot.min.js"></script>

<!-- decoders -->

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/jpx.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/util.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/arithmetic_decoder.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/pdfjs/jpg.js"></script>

<script type="text/javascript" src="<?php echo base_url(); ?>assets/dicom/decoders/rii-mango/lossless-min.js"></script>

<!-- Local -->

<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/dwv-0.22.0.min.js"></script>

<!-- Launch the app -->

</head>

<body>

<img id="imageHidden" src="<?php echo $imageUrl; ?>" hidden="true">

<!-- DWV -->

<div id="dwv">

<div id="pageHeader">

<!-- Title -->

<h1>DWV <span class="dwv-version"></span></h1>

<!-- Toolbar -->

<div class="toolbar"></div>

</div><!-- /pageHeader -->

<div id="pageMain">

<!-- Open file -->

<div class="openData" title="File">

<div class="loaderlist"></div>

<div id="progressbar"></div>

</div>

<!-- Toolbox -->

<div class="toolList" title="Toolbox"></div>

<!-- History -->

<div class="history" title="History"></div>

<!-- Tags -->

<div class="tags" title="Tags"></div>

<!-- DrawList -->

<div class="drawList" title="Draw list"></div>

<!-- Help -->

<div class="help" title="Help"></div>

<!-- Layer Container -->

<div class="layerDialog" title="Image" id="dwv">

<div class="dropBox"></div>

<div class="layerContainer">

<canvas class="imageLayer">Only for HTML5 compatible browsers...</canvas>

<div class="drawDiv"></div>

<div class="infoLayer">

<div class="infotl"></div>

<div class="infotc"></div>

<div class="infotr"></div>

<div class="infocl"></div>

<div class="infocr"></div>

<div class="infobl"></div>

<div class="infobc"></div>

<div class="infobr" style="bottom: 64px;"></div>

<div class="plot"></div>

</div><!-- /infoLayer -->

</div><!-- /layerContainer -->

</div><!-- /layerDialog -->

</div><!-- /pageMain -->

</div><!-- /dwv -->

</body>

</html>

什么是错的代码之后没有 HTML文件?任何建议?

回答:

您错过了启动dwv和加载图像所需的所有'AppLauncher'代码。启动器代码是您在第一个html的window.onload函数中放入的代码。

以上是 dicom查看器添加工具 的全部内容, 来源链接: utcz.com/qa/262704.html

回到顶部