數位切片網頁製作

日期：

 雖然說已經來到AI的時代，

但AI也不是每次都能答對，或是完全符合需求，

所以就把以前setup網頁的備忘寫在這邊...

這是我們的網站：http://140.112.96.250/JiangLab/

關於如何把svs檔轉成google map使用的格式可以參考這邊：https://iime.github.io/virtualmicroscope/

  1. 首先應該是要安裝libvips程式庫： https://www.libvips.org/
  2. 然後開啟命令提示字元，使用"cd" 指令移動到vips安裝的資料夾(ex: C:\vips-dev-8.11\bin)
  3. 同時把.svs檔(ex: H-155.svs)放到該目錄下面。
  4. 在命令提示字元裡面執行以下指令：
    • vips dzsave H-155.svs H-155 --background 255 --centre --layout google
  5. 執行完後獲得 H-155.zip，將其解壓縮至Server資料夾目錄(ex: D:\Web\Slides)
  6. 開啟記事本，貼上本頁面最下面的文字。
  7. 修改slide位置 (ex: http://192.168.68.101/Slides/H-155/)
  8. 存成.html檔案(可以直接儲存後把附檔名改成.html)
  9. 然後就可以用google chrome打開.html檔了，把滑鼠移動到視窗中間，稍微滾動滾輪，這時應該就可以看到數位切片囉。
  10. 若有需要的話，可以修改minZoom和 maxZoom後面的數字，來限制縮放的範圍(若範圍超過實際data的範圍會無法顯示，呈現空白)
  11. 至於要怎麼架網站嘛...下次有空再分享好了...

來貼一張H-221的kidney~

以下是.html檔的程式碼，有顏色的字就是可以自訂或需要視情況修正的部分：

<!DOCTYPE html>
<head>
    <title>YFJiang.net</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="  crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            var map = L.map('map', {
                center: [0,0],
                zoom: 2
            });

            var slide_url_format = "http://192.168.68.101/Slides/H-155/{z}/{y}/{x}.jpg"
            
            var layer =  L.tileLayer(slide_url_format, {
                minZoom:2,
                maxZoom:9
            }).addTo(map);

        });
    </script>

    <style>
        body {
            height: 100%;
            width: 100%;
            background-color:black;
            position: absolute;
            font-family: 'Open Sans', sans-serif;
        }
    </style>
</head>
<body>
    <div id="map" class="sidebar-map" style="background-color:black;width:100%;height:100%;"></div>
</body>   

到</body> 為止整個貼上去就可以了喔~


留言

張貼留言