atr-components 0.2.237 → 0.2.239

package/fesm2020/atr-components.mjs

@@ -387,12 +387,31 @@ class ToolsUtil {
         }
         return date.getFullYear() + "-" + month + "-" + strDate + " " + hours + ":" + seconds;
     }
+    static getFormatDateHour(date) {
+        let month = date.getMonth() + 1;
+        let strDate = date.getDate();
+        let hours = date.getHours();
+        let seconds = date.getMinutes();
+        if (month <= 9) {
+            month = "0" + month;
+        }
+        if (strDate <= 9) {
+            strDate = "0" + strDate;
+        }
+        if (hours <= 9) {
+            hours = "0" + hours;
+        }
+        if (seconds <= 9) {
+            seconds = "0" + seconds;
+        }
+        return date.getFullYear() + "" + month + strDate + hours;
+    }
     static getOssUrl(url, needTime = false) {
         if (!url) {
             return "";
         }
         if (needTime) {
-            url = url + "?v=" + new Date().getTime();
+            url = url + "?v=" + ToolsUtil.getFormatDateHour(new Date());
         }
         if (url.startsWith("http")) {
             return url;
@@ -1817,8 +1836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class OssImgPipe {
     constructor() {
     }
-    transform(value, isVideoCover = false) {
-        return isVideoCover ? ToolsUtil.getVideoCover(value) : ToolsUtil.getOssUrl(value);
+    transform(value, isVideoCover = false, needTime = false) {
+        return isVideoCover ? ToolsUtil.getVideoCover(value) : ToolsUtil.getOssUrl(value, needTime);
     }
 }
 OssImgPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: OssImgPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -4747,8 +4766,16 @@ class ImgCanvasComponent {
         this.width = 800;
         this.height = 800;
         this.clipArr = [];
+        this.rotateNum = 0;
+        this.loadOver = new EventEmitter();
     }
     set url(url) {
+        if (url && url.indexOf('?v=') < 0) {
+            if (url.indexOf("?") < 0) {
+                url += "?";
+            }
+            url += "v=" + new Date().getTime();
+        }
         this.imgUrl = url;
     }
     ngOnInit() {
@@ -4790,7 +4817,7 @@ class ImgCanvasComponent {
             imgH: imgH
         };
     }
-    initImg() {
+    initImg(needSession = true) {
         this.canvasDom = this.canvas1.nativeElement;
         // this.canvasDom = document.getElementById(this.canvasId);
         //检测支持性
@@ -4798,24 +4825,29 @@ class ImgCanvasComponent {
             return;
         //获得 2d 上下文对象
         let context1 = this.canvasDom.getContext('2d');
+        let image = this.imgUrl;
         this.img = new Image(); //创建img元素
         this.img.setAttribute('crossOrigin', 'anonymous');
         this.img.src = this.imgUrl; //设置图片源地址
         // this.img.src = ToolsUtil.getOssUrl(this.imgUrl);//设置图片源地址
         this.img.onload = () => {
-            console.log("图片加载完毕", this.img.height);
-            console.log("图片加载完毕", this.img.width);
-            const { imgW, imgH } = this.getCanvasFull();
-            this.canvasDom.width = this.width;
-            this.canvasDom.height = this.height;
-            if (this.clipArr && this.clipArr.length > 0) {
-                this.goClip(context1);
-            }
-            // 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，height
-            context1.drawImage(this.img, 0, 0, this.width, this.height);
-            console.log("图片加载完毕", this.canvasDom.width + "," + this.canvasDom.height);
+            this.initBase(context1);
+            this.loadOver.emit({ code: 'loadOver' });
         };
     }
+    initBase(context1) {
+        console.log("图片加载完毕", this.img.height);
+        console.log("图片加载完毕", this.img.width);
+        const { imgW, imgH } = this.getCanvasFull();
+        this.canvasDom.width = this.width;
+        this.canvasDom.height = this.height;
+        if (this.clipArr && this.clipArr.length > 0) {
+            this.goClip(context1);
+        }
+        // 参数 1：要绘制的 img   参数 2、3：绘制的 img 在 canvas 中的坐标 参数4,5是width，height
+        context1.drawImage(this.img, 0, 0, this.width, this.height);
+        console.log("图片加载完毕", this.canvasDom.width + "," + this.canvasDom.height);
+    }
     goClip(context) {
         context.beginPath();
         context.moveTo(this.clipArr[0].x1, this.clipArr[0].y1);
@@ -4835,10 +4867,10 @@ class ImgCanvasComponent {
     }
 }
 ImgCanvasComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImgCanvasComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ImgCanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImgCanvasComponent, selector: "app-img", inputs: { url: "url", clipArr: "clipArr" }, viewQueries: [{ propertyName: "canvas1", first: true, predicate: ["canvas1"], descendants: true }], ngImport: i0, template: "<canvas #canvas1 style=\"width: 100%;height: 100%\">\n    \u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u753B\u5E03\uFF01\n</canvas>\n", styles: [""] });
+ImgCanvasComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ImgCanvasComponent, selector: "app-img", inputs: { url: "url", clipArr: "clipArr", rotateNum: "rotateNum" }, outputs: { loadOver: "loadOver" }, viewQueries: [{ propertyName: "canvas1", first: true, predicate: ["canvas1"], descendants: true }], ngImport: i0, template: "<canvas #canvas1 style=\"width: 100%;height: 100%;\">\n  \u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u753B\u5E03\uFF01\n</canvas>\n<ng-content></ng-content>\n", styles: [""] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ImgCanvasComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-img', template: "<canvas #canvas1 style=\"width: 100%;height: 100%\">\n    \u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u753B\u5E03\uFF01\n</canvas>\n", styles: [""] }]
+            args: [{ selector: 'app-img', template: "<canvas #canvas1 style=\"width: 100%;height: 100%;\">\n  \u60A8\u7684\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u753B\u5E03\uFF01\n</canvas>\n<ng-content></ng-content>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { url: [{
                 type: Input
             }], canvas1: [{
@@ -4846,6 +4878,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['canvas1', { static: false }]
             }], clipArr: [{
                 type: Input
+            }], rotateNum: [{
+                type: Input
+            }], loadOver: [{
+                type: Output
             }] } });
 
 const THIRDMODULES = [