基于Vue+OpenSeaDragon的数字细胞阅片开发

前端框架:

vue+elementui+openseadragon

后端

.net core 5.0

数据库

mysql

目前项目效果如图

在原有的基础上新增了阅片轨迹

图像调节,绘图,截图等功能.

另外锐化这块,目前是修改了OpenSeadragon的插件源码.不然锐化会有明显的边界分割线.

锐化会严重影响性能,目前没有什么太好的解决方法

截图功能模块:

截取当前视野,并存到后台api端

web端报告打印

基于vue-print-nb控件,实现了组件打印的控制

基于html2canvas,实现了打印的时候生成webp格式的报告截图,用于病理中心的报告存档.

通过数据库设计,实现了报告的动态电子签名、动态单/双抬头（文字or图片）的设计.

总体来说,Openseadragon是一款非常强大的tiff多层图片web端插件.

类似的还有openlayer.接触不多.资料相对来说更少.

目前主流的医疗细胞阅片,基本都是采用的openseadragon.

openseadragon初始化

<template>
    <div class="app-container" style="height: calc(100vh - 86px); padding: 0px;" v-loading="loading">
        <el-row :gutter="20" style="height: calc(100vh - 87px); padding: 0px" type="flex">
            <div style="position: relative;float: left;flex:1">
                <div class="slider" id="myslider" style="
        z-index: 999;
        float: left;
        margin-top: 10px;
        position: absolute;"></div>
                <div id="openseadragon1" style="width: 100%; height: 100%; z-index: 99;"></div>
            </div>
        </el-row>
    </div>
</template>
<!-- 省略部分代码 -->

  InitViewer: function (fileid, w, h) {
            // console.log('viewImgApp',viewImgApp.data());
            this.viewer = new OpenSeadragon({
                id: "openseadragon1", //绑定ID
                //  prefixUrl: "http://localhost:6011/Content/js/openseadragon/images/", //openseadragon自带的一些图标
                showNavigator: true,
                navigatorPosition: "TOP_RIGHT",
                gestureSettingsMouse: { clickToZoom: false }, //设置鼠标单击不可放大
                navigatorWidth: 200,
                navigatorHeight: 200,
                // iOSDevice: true,
                // useCanvas: false,
                // hardwareAcceleration: false,
                // colorSpace:'srgb',
                //  zoomPerSecond:4,///结束单个缩放动画的秒数
                // gestureSettingsMouse: {
                //     flickEnabled:false,     // 拖动手势结束时禁用动态平移效果(轻弹)
                //     flickMinSpeed: 1,   //  拖动结束动态平移效果的时间
                //     flickMomentum:1,    //  拖动结束动态平移效果的距离
                // },
                // springStiffness:999, //缩放过渡效果，，值越小，则动画越趋于柔和
                animationTime: 1,        //放大或缩小动画过渡的时间，这个值越小，过渡快
                animationZoomTime: 1,
                navigatorSizeRatio: 0.2, //导航的大小与整体视图的比例 ，  如果设置了导航的宽高  则忽略此属性
                navigatorMaintainSizeRatio: true, // 当容器大小改变时，是否自动缩放导航图的大小，此属性依赖上一属性
                navigatorAutoResize: true, // 根据视图自动调整导航大小  若已确定导航大小，请设置为false避免每次窗口缩放的查询 可提高性能
                navigatorAutoFade: false, // 如果用户停止与视口交互，则淡化导航器迷你地图。设置为false将使导航器小地图始终可见。
                navigatorBackground: "#ffffff", //导航背景色
                navigatorOpacity: 1, //0.8,  //导航背景透明度
                navigatorBorderColor: "#ffffff", // 导航边框颜色
                navigatorDisplayRegionColor: "#FF3385", //导航中，当前查看区域的边框颜色
                zoomInButton: "btnzoomin",
                zoomOutButton: "btnzoomout",
                homeButton: "btnzoomhome", //恢复默认
                fullPageButton: "btnzoomful",
                smoothTileEdgesMinZoom: Infinity,////放大到最大倍率后，容器的表现形式，是否为平滑过渡，还是由原图逐渐放大到容器的宽度，这个属性会影响性能，建议使用Infinity将此属性关闭，且IOS下，设置此属性无效
                smoothTileEdges: false,
                debugMode: false,
                //maxZoomPixelRatio:200,
                defaultZoomLevel: 0.6,
                // maxZoomLevel: 40,
                // minZoomImageRatio:0.9,
                // maxZoomPixelRatio: 100,//最大能够将图像放大为最大图像像素宽高的多少倍，为数字类型，默认为1.1.
                crossOriginPolicy: true,
                preserveOverlays: false, //切换图片后，仍然保留图层
                preserveViewport: false,  //切换阅片的时候,是否保留视窗
                autoResize: true,
                preserveImageSizeOnResize: true// 设置图像是否保留原图比例大小，以确保当容器被放大或者缩小时，图片被拉伸，当上一属性为true时起作用,
                // debugMode: true,
            });
            this.viewer.scalebar({
                type: OpenSeadragon.ScalebarType.MAP,
                pixelsPerMeter: window.rqconfig.PIXELSPERMETER == null ? 6800000 : window.rqconfig.PIXELSPERMETER,//28985500,,//30000000, //设置像素与实际的比值 1米=?个像素
                minWidth: "150px",
                location: OpenSeadragon.ScalebarLocation.BOTTOM_LEFT,
                xOffset: 15,
                yOffset: 10,
                stayInsideImage: false,
                color: "rgb(0, 0, 0)",
                fontColor: "rgb(0, 0, 0)",
                backgroundColor: "rgba(255, 255, 255, 0.4)",
                fontSize: "middle",
                barThickness: 4,
            });
            // this.viewer.addHandler("open", function () {
            //     console.log("图像打开成功");
            //     debugger
            //     this.curZoom = this.viewer.viewport.getZoom(true);
            //     this.imgZoom = this.viewer.viewport.viewportToImageZoom(_this.curZoom);
            //     //这是下一步图像过滤的操作
            //     //active.updateFilter();
            // });(
            this.viewer.addHandler("open", () => {
                console.log("图像打开成功");
                this.curZoom = this.viewer.viewport.getZoom(true);
                this.imgZoom = this.viewer.viewport.viewportToImageZoom(this.curZoom);
                //这是下一步图像过滤的操作
                //active.updateFilter();
            });

 var url_img = window.vm.localConfig.VUE_APP_BASE_API + "/Images/TileImg/1/" + fileid + "/";
            this.viewer.world.resetItems();
            var tileSource = {
                //装载tileSource
                Image: {
                    xmlns: "http://schemas.microsoft.com/deepzoom/2009",
                    Url: url_img,
                    Overlap: "0",
                    TileSize: "256",
                    Format: "jpg",
                    autoResize: true,
                    Size: size_img,
                },
            };

配套的tiff图片上传工具,采用http的tus协议,实现了断点续传,token授权,自动根据token上传到指定云端服务器医院文件夹下.

使用wpf ,基于http 的tus协议开发.