kfb-view 3.0.1 → 3.0.3

package/package.json

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

package/src/components/tailoring/index.js

@@ -29,9 +29,23 @@ export class Tailoring extends ViewerCommon {
     this.movePointIndex = -1;
     this.color = '#FFF';
     this.contents = [];
+    this.options = {
+      suffix: 'jpeg',
+      quality: 0.92,
+      resolution: 1200,
+      ...this.options,
+    };
   }
 
-  init({width, height, left, top, color, now = false, contents = []}) {
+  init({
+         width,
+         height,
+         left,
+         top,
+         color,
+         now = false,
+         contents = [],
+       }) {
     this.isInTailoring = true;
     this.movePointIndex = -1;
     const pointList = getRectPoint({x: left, y: top},
@@ -285,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) {
@@ -296,7 +320,22 @@ export class Tailoring extends ViewerCommon {
           startPoint.y * radioY, disWidth, disHeight, 0, 0, disWidth,
           disHeight);
       }
-      return copyCanvas.toDataURL('image/png');
+      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 标注参数