openseadragon插件渲染多层结构细胞染色图

openseadragon插件实现多层次渲染图片

1.设置首层渲染图

图片显示地址是通过后端传输过的文件目录，一般图片存档的路径都是/tile/focus0，focus0是默认层数是0层，也就是首渲染层数（一般层数有三层，分别是 0 1 2，即focus0，focus1，focus2）。

 		// 图片显示地址
      var imagepath0=this.patient_info.scan_folder+'/tile/focus0/';
      // 配置openseadragon的图片url，图片命名格式为000x000.jpg
      this.duomo={
            height: 54720,
            width:  54720,
            tileSize: 1024,
            maxLevel: 6,
            getTileUrl: function( level, x, y ){
              function zeropad( i ) {
                var n = String( i ),
                m = 3 - n.length;
                n = (m < 1) ? n : new Array(m + 1).join( "0" ) + n;
                return n;
              };
              let fn = "http://172.10.1.19:8082/api/img_view/?path="+imagepath0 +  (6-level) + "/" + zeropad(y) + "x" + zeropad(x) + ".jpg";
              console.log('fn',fn);
              // 对图片路径进行加密，返回的是加密签名的图潘路径，复制放在浏览器中也可直接预览
              // let url = client.signatureUrl(fn);
              // return url;
              return fn;
            },
      };
      
      // 设置openseadragon的首加载图
      this.tileSources[0]=this.duomo;

2. 设置多层渲染

一般后台给层数，然后循环层数进行图片路径的循环赋值。把多层图片的路径作为一个对象存入到一个数组中。通过给每个对象（图片路径）添加透明度设置和加载隐藏图像默认开关 这两个参数的设置，以达到多层渲染的效果。

      // 设置openseadragon的首加载图
      this.tileSources[0]=this.duomo;
      // 设置多层图
      if (this.patient_info.multi_focus>1){ 
        for(let k=1;k<this.patient_info.multi_focus;k++){
          let imagepath = this.patient_info.scan_folder+'/tile/focus'+parseInt(k)+'/';                
          this.tileSources[k] = {
                height: 54720,
                width:  54720,
                tileSize: 1024,
                maxLevel: 6,
                getTileUrl: function( level, x, y ){
                  function zeropad( i ) {
                    var n = String( i ),
                    m = 3 - n.length;
                    n = (m < 1) ? n : new Array(m + 1).join( "0" ) + n;
                    return n;
                  };
                  let fn = "http://172.10.1.19:8082/api/img_view/?path="+imagepath +  (6-level) + "/" + zeropad(y) + "x" + zeropad(x) + ".jpg";
      
  
                  return fn;
                },
          };         
        }
        this.tileSources = this.tileSources.map(function(tileSource, i) {
          return {
            tileSource: tileSource,
            opacity: i === 0 ? 1 : 0,         //图像的透明度，如果为 1 则不透明，如果为 0 则完全隐藏。使得第一张图像的不透明，其他图像透明，来预加载图像
            preload: i === 1 ? true : false   //加载隐藏图像的默认开关，true 加载，false 不加载。设置ture时，即使opacity为0(图像被隐藏)，图像也可以加载
          };
        });        
      }

3. 设置tilesource数组进行渲染

 this.viewer=new OpenSeaDragon({
        id:              "mainDiv",
        prefixUrl:       "../../static/images/",
        tileSources: this.tileSources,
        defaultZoomLevel: 20,
        minZoomLevel: 0.8,
        maxZoomLevel: 40,
        showNavigator: true,
        crossOriginPolicy: "Anonymous"          
 });