kfb-view 2.1.9 → 2.1.10

package/.idea/workspace.xml

@@ -37,7 +37,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="55024232-8108-4dc9-9bd3-0fd2aa2f34f8" name="Default Changelist" comment="">
+      <change beforePath="$PROJECT_DIR$/config/webpack.dev.conf.js" beforeDir="false" afterPath="$PROJECT_DIR$/config/webpack.dev.conf.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/example/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/example/index.html" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/example/index.js" beforeDir="false" afterPath="$PROJECT_DIR$/example/index.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/util/imageData.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/util/imageData.js" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -60,6 +64,9 @@
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
+  <component name="GitToolBoxStore">
+    <option name="projectConfigVersion" value="4" />
+  </component>
   <component name="MarkdownSettingsMigration">
     <option name="stateVersion" value="1" />
   </component>
@@ -127,24 +134,23 @@
       <envs />
       <method v="2" />
     </configuration>
-    <configuration name="lint" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+    <configuration name="clean:lib" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
       <scripts>
-        <script value="lint" />
+        <script value="clean:lib" />
       </scripts>
       <node-interpreter value="project" />
       <envs />
       <method v="2" />
     </configuration>
-    <configuration name="server:dev" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
+    <configuration name="server" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
       <package-json value="$PROJECT_DIR$/package.json" />
       <command value="run" />
       <scripts>
-        <script value="server:dev" />
+        <script value="server" />
       </scripts>
       <node-interpreter value="project" />
-      <package-manager value="npm" />
       <envs />
       <method v="2" />
     </configuration>
@@ -160,19 +166,19 @@
       <method v="2" />
     </configuration>
     <list>
-      <item itemvalue="npm.server:dev" />
       <item itemvalue="npm.server:hot" />
       <item itemvalue="npm.build:lib" />
       <item itemvalue="npm.build:prod" />
-      <item itemvalue="npm.lint" />
+      <item itemvalue="npm.server" />
+      <item itemvalue="npm.clean:lib" />
     </list>
     <recent_temporary>
       <list>
         <item itemvalue="npm.build:lib" />
+        <item itemvalue="npm.clean:lib" />
+        <item itemvalue="npm.server" />
         <item itemvalue="npm.build:prod" />
         <item itemvalue="npm.server:hot" />
-        <item itemvalue="npm.lint" />
-        <item itemvalue="npm.server:dev" />
       </list>
     </recent_temporary>
   </component>
@@ -256,14 +262,13 @@
       <workItem from="1641349006244" duration="1011000" />
       <workItem from="1641351835998" duration="596000" />
       <workItem from="1646288182802" duration="1809000" />
-      <workItem from="1646290338220" duration="2938000" />
-    </task>
-    <task id="LOCAL-00001" summary="2.0.0重构">
-      <created>1600767106537</created>
-      <option name="number" value="00001" />
-      <option name="presentableId" value="LOCAL-00001" />
-      <option name="project" value="LOCAL" />
-      <updated>1600767106537</updated>
+      <workItem from="1646290338220" duration="3020000" />
+      <workItem from="1647822528539" duration="6003000" />
+      <workItem from="1647829382894" duration="594000" />
+      <workItem from="1647836886455" duration="602000" />
+      <workItem from="1648018813125" duration="1482000" />
+      <workItem from="1648082997200" duration="605000" />
+      <workItem from="1648452730691" duration="3597000" />
     </task>
     <task id="LOCAL-00002" summary="2.0.0重构">
       <created>1600861772922</created>
@@ -594,19 +599,33 @@
       <option name="project" value="LOCAL" />
       <updated>1646293408931</updated>
     </task>
-    <option name="localTasksCounter" value="49" />
+    <task id="LOCAL-00049" summary="2.1.9">
+      <created>1646293508969</created>
+      <option name="number" value="00049" />
+      <option name="presentableId" value="LOCAL-00049" />
+      <option name="project" value="LOCAL" />
+      <updated>1646293508969</updated>
+    </task>
+    <task id="LOCAL-00050" summary="增加图像处理操作">
+      <created>1647827904359</created>
+      <option name="number" value="00050" />
+      <option name="presentableId" value="LOCAL-00050" />
+      <option name="project" value="LOCAL" />
+      <updated>1647827904359</updated>
+    </task>
+    <option name="localTasksCounter" value="51" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
     <option name="version" value="3" />
   </component>
   <component name="Vcs.Log.History.Properties">
-    <option name="COLUMN_ORDER">
+    <option name="COLUMN_ID_ORDER">
       <list>
-        <option value="0" />
-        <option value="2" />
-        <option value="3" />
-        <option value="1" />
+        <option value="Default.Root" />
+        <option value="Default.Author" />
+        <option value="Default.Date" />
+        <option value="Default.Subject" />
       </list>
     </option>
   </component>
@@ -636,8 +655,6 @@
   <component name="VcsManagerConfiguration">
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="LOCAL_CHANGES_DETAILS_PREVIEW_SHOWN" value="false" />
-    <MESSAGE value="导航图优化" />
-    <MESSAGE value="gnore" />
     <MESSAGE value="标注信息从shape中移到area" />
     <MESSAGE value="2.0.15" />
     <MESSAGE value="优化代码结构" />
@@ -661,7 +678,9 @@
     <MESSAGE value="优化，增加部分注释" />
     <MESSAGE value="2.1.8" />
     <MESSAGE value="TerserPlugin" />
-    <option name="LAST_COMMIT_MESSAGE" value="TerserPlugin" />
+    <MESSAGE value="2.1.9" />
+    <MESSAGE value="增加图像处理操作" />
+    <option name="LAST_COMMIT_MESSAGE" value="增加图像处理操作" />
     <option name="REFORMAT_BEFORE_PROJECT_COMMIT" value="true" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">

package/config/webpack.dev.conf.js

@@ -65,9 +65,9 @@ module.exports = function() {
           context: ['/api', '/image.php', '/process.php'],
           // target: 'http://gastric.label.hzztai.com/',
           // target: 'http://192.168.1.91:7007',
-          // target: 'http://192.168.1.112',
+          target: 'http://192.168.1.91',
           // target: 'https://tct.hzztai.com',
-          target: 'https://pis-ningbo.hzztai.com',
+          //  target: 'https://pis-ningbo.hzztai.com',
           secure: false,
           changeOrigin: true,
         },

package/example/index.js

@@ -1,16 +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({
@@ -31,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,
     },
@@ -78,15 +93,16 @@ instance.get(`/ai/kfb/info?file=${fileName}`).then(({data}) => {
         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,
@@ -100,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,
+      if (!cacheImage[tile.url]) {
+        const sourceLength = sourceWidth * sourceHeight;
+        const canvas = rendered.canvas;
+        let 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,
-          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({
@@ -165,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();
   }