kfb-view 2.1.7 → 2.1.11

package/example/index.js

@@ -1,15 +1,31 @@
-import {KfbView, cacheGammaTable, hslToRgb, rgbToHsl} from '../src';
+import {KfbView, hslToRgb, rgbToHsl, cacheGammaTable} from '../src';
 import axios from 'axios';
+import {EVENT_TAILORING_SCREENSHOT} from '../src/const/event';
 
-const fileName = '/upload/large_file/last/fb6f566d15cc52331e3c4f3e1794a748/T2020-00935.kfb';
+const fileName = '/upload/large_file/last/2022/02/21/d31a31bf1ae5b73fca63f72e2affc879/胃镜1.kfb';
 
 const instance = axios.create({
   baseURL: '/api',
   timeout: 1000,
-  headers: {'Authorization': 'bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvcGlzLW5pbmdiby5oenp0YWkuY29tXC9hcGlcL2F1dGhcL2xvZ2luIiwiaWF0IjoxNjMyMzYxNjQxLCJleHAiOjE2MzI5NjY0NDEsIm5iZiI6MTYzMjM2MTY0MSwianRpIjoidGlGYzBMcTRMRjQxMDNzNCIsInN1YiI6NjQsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.lwwW8vublDPm-zSbQzeY3HabRN3O0Ud7CzxF4gnlVRo'},
+  headers: {'Authorization': 'bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC8xOTIuMTY4LjEuOTFcL2FwaVwvYXV0aFwvbG9naW4iLCJpYXQiOjE2NDg0NTQwNjEsImV4cCI6MTY0OTA1ODg2MSwibmJmIjoxNjQ4NDU0MDYxLCJqdGkiOiJ6WXZUNnJXVzhoQTBrUTYzIiwic3ViIjoxLCJwcnYiOiI4N2UwYWYxZWY5ZmQxNTgxMmZkZWM5NzE1M2ExNGUwYjA0NzU0NmFhIn0.qMTNZvIxSVLGfh8jFTiXKBf7BQXXuz4n2cUj7Ewj6lk'},
 });
 
-instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
+let cacheImage = {};
+
+const debounce = (func, delay) => {
+  let timer;
+  return function(...args) {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    timer = setTimeout(() => {
+      // eslint-disable-next-line no-invalid-this,babel/no-invalid-this
+      func.apply(this, args);
+    }, delay);
+  };
+};
+
+instance.get(`/slide/info?file=${fileName}`).then(({data}) => {
   let params = {};
   params.file = fileName;
   const kv = new KfbView({
@@ -20,6 +36,9 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
       disabled: false,
       drag: true,
     },
+    board: {
+      ROI: true,
+    },
     graduation: {
       right: 30,
     },
@@ -27,7 +46,7 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
       disabled: false,
       height: 200,
       style: 'right: 0;top: 0',
-      thumbnail: `/api/ai/kfb/image?file=${fileName}&type=thumbnail`,
+      thumbnail: `/api/slide/getImage?file=${fileName}&type=thumbnail`,
       vestige: true,
       vestigeZoom: .1,
     },
@@ -66,15 +85,24 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
       },
     },
     tileDrawing(e) {
-      const {context, rendered, sourceWidth, sourceHeight, position, size, initRendered} = e;
+      const {
+        context,
+        rendered,
+        sourceWidth,
+        sourceHeight,
+        position,
+        size,
+        initRendered,
+        tile,
+      } = e;
       let rangeA = document.querySelector('#a').value / 1;
+      let rangeS = document.querySelector('#s').value / 1;
+      let rangeL = document.querySelector('#l').value / 1;
+      let rangeR = document.querySelector('#r').value / 1;
+      let rangeG = document.querySelector('#g').value / 1;
       let rangeB = document.querySelector('#b').value / 1;
-      let rangeC = document.querySelector('#c').value / 1;
-      position.x = position.x >> 0;
-      position.y = position.y >> 0;
-      size.y = size.y >> 0;
-      size.x = size.x >> 0;
-      if (rangeB === 0 && rangeA === 1 && rangeC === 0) {
+      if (rangeB === 0 && rangeA === 1 && rangeS === 0 && rangeL === 0 &&
+        rangeR === 0 && rangeG === 0) {
         context.drawImage(
           rendered.canvas,
           0,
@@ -88,64 +116,67 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
         );
         return;
       }
-      const sourceLength = sourceWidth * sourceHeight;
-      const sizeLength = size.x * size.y;
-      const isSource = sizeLength > sourceLength;
-      const canvas = rendered.canvas;
-      let imageData = undefined;
-      let length = isSource ? sourceLength : sizeLength;
-      if (isSource) {
-        imageData = initRendered.getImageData(0, 0, canvas.width,
-          canvas.height);
-      } else {
-        const offCanvas = new OffscreenCanvas(size.x, size.y);
-        const offCtx = offCanvas.getContext('2d');
-        offCtx.drawImage(initRendered.canvas, 0, 0, offCanvas.width,
-          offCanvas.height);
-        imageData = initRendered.getImageData(0, 0, canvas.width,
+      if (!cacheImage[tile.url]) {
+        const sourceLength = sourceWidth * sourceHeight;
+        const canvas = rendered.canvas;
+        let imageData = initRendered.getImageData(0, 0, canvas.width,
           canvas.height);
-        imageData = offCtx.getImageData(0, 0, offCanvas.width,
-          offCanvas.height);
-      }
-      for (let i = 0; i < length; i++) {
-        let r = imageData.data[i * 4 + 0];
-        let g = imageData.data[i * 4 + 1];
-        let b = imageData.data[i * 4 + 2];
-
-        // console.log(h, s, l);
-        if (rangeB !== 0) {
-          let {h, s, l} = rgbToHsl(r, g, b);
-          const rgb = hslToRgb(h, s * (1 + rangeB), l);
-          r = rgb.r;
-          g = rgb.g;
-          b = rgb.b;
-        }
-        if (rangeA !== 1) {
-          r = cacheGammaTable[rangeA][r >> 0];
-          g = cacheGammaTable[rangeA][g >> 0];
-          b = cacheGammaTable[rangeA][b >> 0];
+        for (let i = 0; i < sourceLength; i++) {
+          let r = imageData.data[i * 4 + 0];
+          let g = imageData.data[i * 4 + 1];
+          let b = imageData.data[i * 4 + 2];
+          if (rangeR !== 0) {
+            r = r * (1 + rangeR);
+            r = r > 255 ? 255 : r;
+          }
+          if (rangeG !== 0) {
+            g = g * (1 + rangeG);
+            g = g > 255 ? 255 : g;
+          }
+          if (rangeB !== 0) {
+            b = b * (1 + rangeB);
+            g = g > 255 ? 255 : g;
+          }
+          if (rangeS !== 0) {
+            let {h, s, l} = rgbToHsl(r, g, b);
+            const rgb = hslToRgb(h, s * (1 + rangeS), l);
+            r = rgb.r;
+            g = rgb.g;
+            b = rgb.b;
+          }
+          if (rangeL !== 0) {
+            let {h, s, l} = rgbToHsl(r, g, b);
+            const rgb = hslToRgb(h, s, l * (1 + rangeL));
+            r = rgb.r;
+            g = rgb.g;
+            b = rgb.b;
+          }
+          if (rangeA !== 1) {
+            r = cacheGammaTable[rangeA][r >> 0];
+            g = cacheGammaTable[rangeA][g >> 0];
+            b = cacheGammaTable[rangeA][b >> 0];
+          }
+          if (r > 255 || g > 255 || b > 255) {
+            console.log(r, g, b);
+          }
+          imageData.data[i * 4 + 0] = r;
+          imageData.data[i * 4 + 1] = g;
+          imageData.data[i * 4 + 2] = b;
         }
-        imageData.data[i * 4 + 0] = r;
-        imageData.data[i * 4 + 1] = g;
-        imageData.data[i * 4 + 2] = b;
-      }
-      if (isSource) {
         rendered.putImageData(imageData, 0, 0);
-        context.drawImage(
-          canvas,
-          0,
-          0,
-          sourceWidth,
-          sourceHeight,
-          position.x,
-          position.y,
-          size.x,
-          size.y,
-        );
-      } else {
-        context.putImageData(imageData, position.x, position.y);
-        /* context.drawImage(offCanvas, position.x, position.y, size.x, size.y);*/
+        cacheImage[tile.url] = canvas;
       }
+      context.drawImage(
+        cacheImage[tile.url],
+        0,
+        0,
+        sourceWidth,
+        sourceHeight,
+        position.x,
+        position.y,
+        size.x,
+        size.y,
+      );
     },
   });
   /* kv.board.startDraw({
@@ -153,13 +184,16 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
    });*/
   console.log(kv);
   let list = [];
-  const rangeAEl = document.querySelector('#a');
-  const rangeBEl = document.querySelector('#b');
-  rangeAEl.onchange = changeRange;
-  rangeBEl.onchange = changeRange;
+  document.querySelector('#a').onchange = debounce(changeRange, 500);
+  document.querySelector('#s').onchange = debounce(changeRange, 500);
+  document.querySelector('#l').onchange = debounce(changeRange, 500);
+  document.querySelector('#r').onchange = debounce(changeRange, 500);
+  document.querySelector('#g').onchange = debounce(changeRange, 500);
+  document.querySelector('#b').onchange = debounce(changeRange, 500);
 
   // eslint-disable-next-line no-unused-vars
   function changeRange() {
+    cacheImage = {};
     kv.viewer.forceRedraw();
   }
 
@@ -176,8 +210,11 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
   rect.onclick = () => {
     kv.board.startDraw({
       tool: KfbView.marks.RECTANGLE,
-      // isROI: true,
+      isROI: true,
       once: true,
+      measure: false,
+      resize: false,
+      move: false,
     });
   };
   line.onclick = () => {
@@ -258,18 +295,18 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
   kv.$on(KfbView.events.EVENT_CANCEL_SELECT_LABEL, (e) => {
     // kv.board.endDraw();
   });
-  /*  const {width, height} = kv.$options;
-  kv.rotation.init(
-     {
-       left: width / 2 - 100,
-       top: height / 2 - 100,
-       height: data.height,
-       width: data.width,
-       color: '#F00',
-     });
-    kv.$on(KfbView.events.EVENT_TAILORING_SCREENSHOT, (e) => {
-      console.log(e.detail);
-    });*/
+  const {width, height} = kv.$options;
+  kv.$on(KfbView.events.EVENT_TAILORING_SCREENSHOT, (e) => {
+    console.log(e.detail);
+  });
+  /*  kv.tailoring.init(
+      {
+        left: width / 2 - 100,
+        top: height / 2 - 100,
+        height: 200,
+        width: 200,
+        color: '#F00',
+      });*/
   setTimeout(() => {
     // kv.destroy();
   }, 6000);