atr-components 0.2.236 → 0.2.238
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/pipe/image-pipe.pipe.d.ts +1 -1
- package/core/pipe/oss.pipe.d.ts +1 -1
- package/core/utils/ToolsUtil.d.ts +2 -1
- package/esm2020/core/pipe/image-pipe.pipe.mjs +3 -3
- package/esm2020/core/pipe/oss.pipe.mjs +3 -3
- package/esm2020/core/utils/ToolsUtil.mjs +27 -5
- package/esm2020/lib/shared/img-canvas/img-canvas.component.mjs +36 -13
- package/fesm2015/atr-components.mjs +64 -20
- package/fesm2015/atr-components.mjs.map +1 -1
- package/fesm2020/atr-components.mjs +64 -20
- package/fesm2020/atr-components.mjs.map +1 -1
- package/lib/shared/img-canvas/img-canvas.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -387,14 +387,37 @@ class ToolsUtil {
|
|
|
387
387
|
}
|
|
388
388
|
return date.getFullYear() + "-" + month + "-" + strDate + " " + hours + ":" + seconds;
|
|
389
389
|
}
|
|
390
|
-
static
|
|
390
|
+
static getFormatDateHour(date) {
|
|
391
|
+
let month = date.getMonth() + 1;
|
|
392
|
+
let strDate = date.getDate();
|
|
393
|
+
let hours = date.getHours();
|
|
394
|
+
let seconds = date.getMinutes();
|
|
395
|
+
if (month <= 9) {
|
|
396
|
+
month = "0" + month;
|
|
397
|
+
}
|
|
398
|
+
if (strDate <= 9) {
|
|
399
|
+
strDate = "0" + strDate;
|
|
400
|
+
}
|
|
401
|
+
if (hours <= 9) {
|
|
402
|
+
hours = "0" + hours;
|
|
403
|
+
}
|
|
404
|
+
if (seconds <= 9) {
|
|
405
|
+
seconds = "0" + seconds;
|
|
406
|
+
}
|
|
407
|
+
return date.getFullYear() + "" + month + strDate + hours;
|
|
408
|
+
}
|
|
409
|
+
static getOssUrl(url, needTime = false) {
|
|
391
410
|
if (!url) {
|
|
392
411
|
return "";
|
|
393
412
|
}
|
|
413
|
+
if (needTime) {
|
|
414
|
+
url = url + "?v=" + ToolsUtil.getFormatDateHour(new Date());
|
|
415
|
+
}
|
|
394
416
|
if (url.startsWith("http")) {
|
|
395
417
|
return url;
|
|
396
418
|
}
|
|
397
|
-
|
|
419
|
+
let result = atr_static_datas.OSS_URL + url;
|
|
420
|
+
return result;
|
|
398
421
|
}
|
|
399
422
|
static getStaticOssUrl(url) {
|
|
400
423
|
if (!url) {
|
|
@@ -403,8 +426,7 @@ class ToolsUtil {
|
|
|
403
426
|
if (url.startsWith("http")) {
|
|
404
427
|
return url;
|
|
405
428
|
}
|
|
406
|
-
|
|
407
|
-
return atr_static_datas.STATIC_OSS_URL + url + "?v=" + v;
|
|
429
|
+
return atr_static_datas.STATIC_OSS_URL + url;
|
|
408
430
|
}
|
|
409
431
|
static removeHtml(value) {
|
|
410
432
|
if (!value) {
|
|
@@ -1814,8 +1836,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1814
1836
|
class OssImgPipe {
|
|
1815
1837
|
constructor() {
|
|
1816
1838
|
}
|
|
1817
|
-
transform(value, isVideoCover = false) {
|
|
1818
|
-
return isVideoCover ? ToolsUtil.getVideoCover(value) : ToolsUtil.getOssUrl(value);
|
|
1839
|
+
transform(value, isVideoCover = false, needTime = false) {
|
|
1840
|
+
return isVideoCover ? ToolsUtil.getVideoCover(value) : ToolsUtil.getOssUrl(value, needTime);
|
|
1819
1841
|
}
|
|
1820
1842
|
}
|
|
1821
1843
|
OssImgPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: OssImgPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
@@ -1909,8 +1931,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
|
|
|
1909
1931
|
}] });
|
|
1910
1932
|
|
|
1911
1933
|
class OssPipe {
|
|
1912
|
-
transform(value, defaultVal) {
|
|
1913
|
-
return ToolsUtil.getOssUrl(value);
|
|
1934
|
+
transform(value, defaultVal, needTime = false) {
|
|
1935
|
+
return ToolsUtil.getOssUrl(value, needTime);
|
|
1914
1936
|
}
|
|
1915
1937
|
}
|
|
1916
1938
|
OssPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: OssPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
@@ -4746,6 +4768,12 @@ class ImgCanvasComponent {
|
|
|
4746
4768
|
this.clipArr = [];
|
|
4747
4769
|
}
|
|
4748
4770
|
set url(url) {
|
|
4771
|
+
if (url && url.indexOf('?v=') < 0) {
|
|
4772
|
+
if (url.indexOf("?") < 0) {
|
|
4773
|
+
url += "?";
|
|
4774
|
+
}
|
|
4775
|
+
url += "v=" + new Date().getTime();
|
|
4776
|
+
}
|
|
4749
4777
|
this.imgUrl = url;
|
|
4750
4778
|
}
|
|
4751
4779
|
ngOnInit() {
|
|
@@ -4787,7 +4815,8 @@ class ImgCanvasComponent {
|
|
|
4787
4815
|
imgH: imgH
|
|
4788
4816
|
};
|
|
4789
4817
|
}
|
|
4790
|
-
initImg() {
|
|
4818
|
+
initImg(needSession = true) {
|
|
4819
|
+
let obj = SessionStorageUtil.get('appImg');
|
|
4791
4820
|
this.canvasDom = this.canvas1.nativeElement;
|
|
4792
4821
|
// this.canvasDom = document.getElementById(this.canvasId);
|
|
4793
4822
|
//检测支持性
|
|
@@ -4795,24 +4824,39 @@ class ImgCanvasComponent {
|
|
|
4795
4824
|
return;
|
|
4796
4825
|
//获得 2d 上下文对象
|
|
4797
4826
|
let context1 = this.canvasDom.getContext('2d');
|
|
4827
|
+
let image = this.imgUrl;
|
|
4828
|
+
// if (obj && needSession && obj[image]) {
|
|
4829
|
+
// //图片缓存在session中
|
|
4830
|
+
// this.img = obj[image]
|
|
4831
|
+
// this.initBase(context1)
|
|
4832
|
+
// return;
|
|
4833
|
+
// }
|
|
4834
|
+
if (!obj) {
|
|
4835
|
+
obj = {};
|
|
4836
|
+
}
|
|
4798
4837
|
this.img = new Image(); //创建img元素
|
|
4799
4838
|
this.img.setAttribute('crossOrigin', 'anonymous');
|
|
4800
4839
|
this.img.src = this.imgUrl; //设置图片源地址
|
|
4801
4840
|
// this.img.src = ToolsUtil.getOssUrl(this.imgUrl);//设置图片源地址
|
|
4802
4841
|
this.img.onload = () => {
|
|
4803
|
-
|
|
4804
|
-
|
|
4805
|
-
|
|
4806
|
-
this.canvasDom.width = this.width;
|
|
4807
|
-
this.canvasDom.height = this.height;
|
|
4808
|
-
if (this.clipArr && this.clipArr.length > 0) {
|
|
4809
|
-
this.goClip(context1);
|
|
4810
|
-
}
|
|
4811
|
-
// 参数 1:要绘制的 img 参数 2、3:绘制的 img 在 canvas 中的坐标 参数4,5是width,height
|
|
4812
|
-
context1.drawImage(this.img, 0, 0, this.width, this.height);
|
|
4813
|
-
console.log("图片加载完毕", this.canvasDom.width + "," + this.canvasDom.height);
|
|
4842
|
+
obj[image] = this.img;
|
|
4843
|
+
SessionStorageUtil.put('appImg', obj);
|
|
4844
|
+
this.initBase(context1);
|
|
4814
4845
|
};
|
|
4815
4846
|
}
|
|
4847
|
+
initBase(context1) {
|
|
4848
|
+
console.log("图片加载完毕", this.img.height);
|
|
4849
|
+
console.log("图片加载完毕", this.img.width);
|
|
4850
|
+
const { imgW, imgH } = this.getCanvasFull();
|
|
4851
|
+
this.canvasDom.width = this.width;
|
|
4852
|
+
this.canvasDom.height = this.height;
|
|
4853
|
+
if (this.clipArr && this.clipArr.length > 0) {
|
|
4854
|
+
this.goClip(context1);
|
|
4855
|
+
}
|
|
4856
|
+
// 参数 1:要绘制的 img 参数 2、3:绘制的 img 在 canvas 中的坐标 参数4,5是width,height
|
|
4857
|
+
context1.drawImage(this.img, 0, 0, this.width, this.height);
|
|
4858
|
+
console.log("图片加载完毕", this.canvasDom.width + "," + this.canvasDom.height);
|
|
4859
|
+
}
|
|
4816
4860
|
goClip(context) {
|
|
4817
4861
|
context.beginPath();
|
|
4818
4862
|
context.moveTo(this.clipArr[0].x1, this.clipArr[0].y1);
|