我正在为我的客户做一个Web应用程序。我们有一个问题。我想在客户端显示dicom图像。现在我们使用了https://github.com/ivmartel/dwv。我试过了
添加css和工具栏之前的html文件
<!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和toolbar js文件时，它在添加工具栏文件后没有显示任何html文件
<!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>
代码有什么问题？有什么建议？
您缺少启动dwv并加载图像所需的所有“AppLauncher”代码。启动器代码是您在第一个html的window.onload函数中放入的代码。