kfb-view 3.0.2 → 3.0.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kfb-view",
   "description": "一个在线kfb的阅片软件",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "author": "qifeng.fan <qifeng.fan@hzztai.com>",
   "license": "MIT",
   "main": "lib/kfb-view.js",

package/src/components/navigator/index.js

@@ -325,19 +325,19 @@ export class Navigator extends EventEmitter {
       const imgHeight = img.height;
       let scale = 1;
       if (imgWidth >= imgHeight) {
-        scale = imgHeight / this.height;
-        const trueWidth = imgWidth / scale;
-        canvas.height = this.height;
-        canvas.width = trueWidth;
-        ctx.drawImage(img, 0, 0, trueWidth, canvas.height);
-      }
-      if (imgHeight > imgWidth) {
         scale = imgWidth / this.width;
         const trueHeight = imgHeight / scale;
         canvas.width = this.width;
         canvas.height = trueHeight;
         ctx.drawImage(img, 0, 0, canvas.width, trueHeight);
       }
+      if (imgHeight > imgWidth) {
+        scale = imgHeight / this.height;
+        const trueWidth = imgWidth / scale;
+        canvas.height = this.height;
+        canvas.width = trueWidth;
+        ctx.drawImage(img, 0, 0, trueWidth, canvas.height);
+      }
       this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
       const colorCanvas = this.element.getElementsByClassName(
         'navigator-color-rect')[0];
@@ -358,14 +358,6 @@ export class Navigator extends EventEmitter {
       const imgHeight = img.height;
       let scale = 1;
       if (imgWidth >= imgHeight) {
-        scale = imgHeight / this.height;
-        const trueWidth = imgWidth / scale;
-        this.canvas.height = this.height;
-        this.canvas.width = trueWidth;
-        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        ctx.drawImage(img, 0, 0, trueWidth, this.canvas.height);
-      }
-      if (imgHeight > imgWidth) {
         scale = imgWidth / this.width;
         const trueHeight = imgHeight / scale;
         this.canvas.width = this.width;
@@ -373,6 +365,14 @@ export class Navigator extends EventEmitter {
         ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
         ctx.drawImage(img, 0, 0, this.canvas.width, trueHeight);
       }
+      if (imgHeight > imgWidth) {
+        scale = imgHeight / this.height;
+        const trueWidth = imgWidth / scale;
+        this.canvas.height = this.height;
+        this.canvas.width = trueWidth;
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        ctx.drawImage(img, 0, 0, trueWidth, this.canvas.height);
+      }
       this.setViewRect(this.element.getElementsByClassName('view-rect')[0]);
       const colorCanvas = this.element.getElementsByClassName(
         'navigator-color-rect')[0];

package/src/components/tailoring/index.js

@@ -29,7 +29,12 @@ export class Tailoring extends ViewerCommon {
     this.movePointIndex = -1;
     this.color = '#FFF';
     this.contents = [];
-    this.imageType = 'jpeg';
+    this.options = {
+      suffix: 'jpeg',
+      quality: 0.92,
+      resolution: 1200,
+      ...this.options,
+    };
   }
 
   init({
@@ -40,11 +45,9 @@ export class Tailoring extends ViewerCommon {
          color,
          now = false,
          contents = [],
-         suffix = 'jpeg',
        }) {
     this.isInTailoring = true;
     this.movePointIndex = -1;
-    this.imageType = suffix;
     const pointList = getRectPoint({x: left, y: top},
       {x: left + width, y: top + height});
     this.tailoringPoints = [
@@ -296,10 +299,20 @@ export class Tailoring extends ViewerCommon {
       const imageData =
         ctx.getImageData(
           startPoint.x * radioX, startPoint.y * radioY, disWidth, disHeight);
+      for (let i = 0; i < imageData.data.length; i += 4) {
+        if (imageData.data[i + 3] === 0) {
+          imageData.data[i] = 255;
+          imageData.data[i + 1] = 255;
+          imageData.data[i + 2] = 255;
+          imageData.data[i + 3] = 255;
+        }
+      }
       const copyCanvas = document.createElement('canvas');
       copyCanvas.width = disWidth;
       copyCanvas.height = disHeight;
       const copyCtx = copyCanvas.getContext('2d');
+      copyCtx.fillstyle = '#fff';
+      copyCtx.fillRect(0, 0, copyCanvas.width, copyCanvas.height);
       copyCtx.putImageData(imageData, 0, 0, 0, 0, disWidth, disHeight);
       const shapeCanvas = this.kv.shape?.canvas;
       if (shapeCanvas) {
@@ -307,7 +320,22 @@ export class Tailoring extends ViewerCommon {
           startPoint.y * radioY, disWidth, disHeight, 0, 0, disWidth,
           disHeight);
       }
-      return copyCanvas.toDataURL(`image/${this.imageType || 'jpeg'}`);
+      if (copyCanvas.width > this.options.resolution) {
+        const maxCanvas = document.createElement('canvas');
+        maxCanvas.width = this.options.resolution;
+        maxCanvas.height = this.options.resolution / copyCanvas.width *
+          copyCanvas.height;
+        const maxCtx = maxCanvas.getContext('2d');
+        maxCtx.fillstyle = '#fff';
+        maxCtx.fillRect(0, 0, maxCanvas.width, maxCanvas.height);
+        maxCtx.drawImage(copyCanvas, 0, 0, copyCanvas.width, copyCanvas.height,
+          0, 0, maxCanvas.width, maxCanvas.height);
+        return maxCanvas.toDataURL(`image/${this.options.suffix || 'jpeg'}`,
+          this.options.quality);
+      } else {
+        return copyCanvas.toDataURL(`image/${this.options.suffix || 'jpeg'}`,
+          this.options.quality);
+      }
     } catch (e) {
       console.error(e);
     }

package/src/view.js

@@ -51,6 +51,9 @@ export default class KfbView extends EventEmitter {
    * @param {boolean=} config.rotation.disabled 是否禁用旋转
    * @param {Object} config.tailoring 裁剪图像参数
    * @param {boolean=} config.tailoring.disabled 是否禁用裁剪
+   * @param {string=} config.tailoring.suffix 截图后缀
+   * @param {number=} config.tailoring.quality 截图的质量
+   * @param {number=} config.tailoring.resolution 分辨率
    * @param {Object} config.shape 显示标注图形
    * @param {boolean=} config.shape.disabled 是否禁用标注
    * @param {Object} config.board 标注参数