atr-components 0.2.229 → 0.2.230

package/fesm2020/atr-components.mjs

@@ -287,6 +287,20 @@ class ToolsUtil {
             }
         }
     }
+    static dataURLtoBlob(dataurl) {
+        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
+    }
+    static dataURLtoFile(dataurl, filename) {
+        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], (filename || ToolsUtil.getRandomFileName()), { type: mime });
+    }
     static getYesterday(day) {
         let time = day.getTime() - 1000 * 60 * 60 * 24;
         day = new Date(time);
@@ -1982,12 +1996,12 @@ class UploadOssService {
     constructor(httpService, httpClient) {
         this.httpService = httpService;
         this.httpClient = httpClient;
-        this.uploadOss = (file, dir = 'ueditor') => {
+        this.uploadOss = (file, dir = 'ueditor', fullUrl = true) => {
             return new Observable(observe => {
                 const success = (result) => {
                     if (result.status === 200) {
                         this.uploadData = result.data;
-                        this.customReq(file).subscribe((url) => {
+                        this.customReq(file, fullUrl).subscribe((url) => {
                             observe.next(url);
                             observe.unsubscribe();
                         });
@@ -2002,10 +2016,13 @@ class UploadOssService {
                     observe.unsubscribe();
                 };
                 let fileName = ToolsUtil.getRandomFileName() + "." + ToolsUtil.getFileExt(file.name);
-                this.httpService.post(atr_static_datas.OSS_POLICY, { dir: dir, fileName: fileName }, ToolsUtil.getHttpOptions()).subscribe(success, error);
+                this.httpService.post(atr_static_datas.OSS_POLICY, {
+                    dir: dir,
+                    fileName: fileName
+                }, ToolsUtil.getHttpOptions()).subscribe(success, error);
             });
         };
-        this.customReq = (file) => {
+        this.customReq = (file, fullUrl = true) => {
             const formData = new FormData();
             for (let key in this.uploadData) {
                 if (key != 'host')
@@ -2020,7 +2037,7 @@ class UploadOssService {
                     if (event.type === HttpEventType.UploadProgress) {
                     }
                     else if (event instanceof HttpResponse) {
-                        const url = event.url + this.uploadData.key;
+                        const url = fullUrl ? (event.url + this.uploadData.key) : this.uploadData.key;
                         observe.next(url);
                         observe.unsubscribe();
                     }
@@ -4724,6 +4741,7 @@ class ImgCanvasComponent {
         this.elementRef = elementRef;
         this.width = 800;
         this.height = 800;
+        this.clipArr = [];
     }
     set url(url) {
         this.imgUrl = url;
@@ -4785,11 +4803,25 @@ class ImgCanvasComponent {
             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);
+        this.clipArr.forEach((item, index) => {
+            if (index > 0) {
+                context.lineTo(item.x1, item.y1);
+            }
+        });
+        context.lineTo(this.clipArr[0].x1, this.clipArr[0].y1);
+        context.clip();
+    }
     ngAfterViewInit() {
         setTimeout(() => {
             console.log('当前组件宽高', this.elementRef.nativeElement.offsetHeight);
@@ -4798,7 +4830,7 @@ 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" }, 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" }, 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: [""] });
 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: [""] }]
@@ -4807,6 +4839,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }], canvas1: [{
                 type: ViewChild,
                 args: ['canvas1', { static: false }]
+            }], clipArr: [{
+                type: Input
             }] } });
 
 const THIRDMODULES = [