Fix bug related to pixel decoding

Author: hackermd

build/dicom-microscopy-viewer.js

@@ -49630,6 +49630,20 @@
             '1.2.840.10008.1.2.4.80': 'x-jls',
             '1.2.840.10008.1.2.4.90': 'jp2'
         };
+
+        function base64Encode(data){
+          const uint8Array = new Uint8Array(data);
+          const chunkSize = 0x8000;
+          const strArray = [];
+          for (let i=0; i < uint8Array.length; i+=chunkSize) {
+            let str = String.fromCharCode.apply(
+              null, uint8Array.subarray(i, i + chunkSize)
+            );
+            strArray.push(str);
+          }
+          return btoa(strArray.join(''));
+        }
+
         function tileLoadFunction(tile, src) {
           if (src !== null) {
             let studyInstanceUID = DICOMwebClient.utils.getStudyInstanceUIDFromUri(src);
@@ -49648,9 +49662,8 @@
               imageSubtype
             };
             client.retrieveInstanceFrames(retrieveOptions).then((frames) => {
-              let pixels = frames[0];
               // Encode pixel data as base64 string
-              const encodedPixels = btoa(String.fromCharCode(...new Uint8Array(pixels)));
+              const encodedPixels = base64Encode(frames[0]);
               // Add pixel data to image
               tile.getImage().src = "data:image/" + imageSubtype + ";base64," + encodedPixels;
 
@@ -49814,7 +49827,7 @@
           loadTilesWhileInteracting: true,
           logo: false
         });
-        this.map.getView().fit(extent);
+        this.map.getView().fit(extent, this.map.getSize());
         return(this.map);
       });
       return(mapPromise);

src/api.js

@@ -1,4 +1,5 @@
 import WebGLMap from 'ol/WebGLMap';
+import Map from 'ol/Map';
 import View from 'ol/View';
 import TileLayer from 'ol/layer/Tile';
 import XYZ from 'ol/source/XYZ';
@@ -214,6 +215,20 @@ class DICOMMicroscopyViewer {
           '1.2.840.10008.1.2.4.80': 'x-jls',
           '1.2.840.10008.1.2.4.90': 'jp2'
       }
+
+      function base64Encode(data){
+        const uint8Array = new Uint8Array(data);
+        const chunkSize = 0x8000;
+        const strArray = [];
+        for (let i=0; i < uint8Array.length; i+=chunkSize) {
+          let str = String.fromCharCode.apply(
+            null, uint8Array.subarray(i, i + chunkSize)
+          );
+          strArray.push(str);
+        }
+        return btoa(strArray.join(''));
+      }
+
       function tileLoadFunction(tile, src) {
         if (src !== null) {
           let studyInstanceUID = DICOMwebClient.utils.getStudyInstanceUIDFromUri(src);
@@ -232,9 +247,8 @@ class DICOMMicroscopyViewer {
             imageSubtype
           };
           client.retrieveInstanceFrames(retrieveOptions).then((frames) => {
-            let pixels = frames[0];
             // Encode pixel data as base64 string
-            const encodedPixels = btoa(String.fromCharCode(...new Uint8Array(pixels)));
+            const encodedPixels = base64Encode(frames[0]);
             // Add pixel data to image
             tile.getImage().src = "data:image/" + imageSubtype + ";base64," + encodedPixels;
 
@@ -398,7 +412,7 @@ class DICOMMicroscopyViewer {
         loadTilesWhileInteracting: true,
         logo: false
       });
-      this.map.getView().fit(extent);
+      this.map.getView().fit(extent, this.map.getSize());
       return(this.map);
     });
     return(mapPromise);

test/test.js

@@ -2,22 +2,29 @@ const chai = require('chai');
 chai.should();
 
 const dicomMicroscopyViewer = require('../build/dicom-microscopy-viewer.js');
-const viewer = new dicomMicroscopyViewer.api.DICOMMicroscopyViewer({
-  client: 'foo',
-  studyInstanceUID: '1.2.3.4',
-  seriesInstanceUID: '1.2.3.5'
-});
-describe('viewer', function() {
+
+describe('dicomMicroscopyViewer.api.DICOMMicroscopyViewer', function() {
+
+  const viewer = new dicomMicroscopyViewer.api.DICOMMicroscopyViewer({
+    client: 'foo',
+    studyInstanceUID: '1.2.3.4',
+    seriesInstanceUID: '1.2.3.5'
+  });
+
   it('should have property "map"', function() {
     viewer.should.have.property('map').equal(null);
   });
+
   it('should have property "client"', function() {
     viewer.should.have.property('client').equal('foo');
   });
+
   it('should have property "studyInstanceUID"', function() {
     viewer.should.have.property('studyInstanceUID').equal('1.2.3.4');
   });
+
   it('should have property "seriesInstanceUID"', function() {
     viewer.should.have.property('seriesInstanceUID').equal('1.2.3.5');
   });
+
 });