- 
+
+
+
@@ -121,7 +127,8 @@
isPlay: false,
title: null,
index: 0,
- downloadSrc: null
+ downloadSrc: null,
+ urls: []
})
onMounted(() => {
@@ -209,9 +216,18 @@
let urls = [];
for(let index = 0, len = options.times.length; index < len; index++){
let time = moment(options.times[index].date);
- urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
+
+ if (options.currentElement === 'PBLH') {
+ urls.push(
+ RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time),
+ RamanLidarConfig.getUrl(options.currentRegion, 'signal_' + options.currentElement, time)
+ );
+ } else
+ urls.push(RamanLidarConfig.getUrl(options.currentRegion, options.currentElement, time));
}
+ console.log(urls)
+
return urls;
}
@@ -247,7 +263,6 @@
}
options.times.reverse();
- console.log(options.times)
options.index = options.times.length - 1;
}
@@ -361,6 +376,34 @@
activeImage();
}
+ const onSaveClick = () => {
+ let pictures = document.getElementById('pictures');
+ options.urls = [options.signalPBLHImgUrl, options.signalPBLHImgUrl, options.imgUrl];
+
+ for (let i = 0; i < options.urls.length; i++) {
+ let img = new Image();
+ img.src = options.urls[i];
+ let canvas = document.createElement("canvas") as HTMLCanvasElement;
+ canvas.width = img.width;
+ canvas.height = img.height;
+
+ let ctx = canvas.getContext("2d");
+ let base64 = "";
+
+ img.setAttribute("crossOrigin",'Anonymous');
+ img.onload = () => {
+ ctx.drawImage(img, 0, 0);
+ base64 = canvas.toDataURL("image/png");
+ pictures.children[i].setAttribute('href', base64);
+ setTimeout(() => {
+ let button: HTMLElement = pictures.children[i] as HTMLElement;
+ button.click();
+ pictures.children[i].setAttribute('href', null);
+ }, 500);
+ };
+ }
+ }
+
return {
...toRefs(options),
onRegionClick,
@@ -374,7 +417,8 @@
onPlayClick,
onChange,
onImageLoad,
- onDownloadClick
+ onDownloadClick,
+ onSaveClick
}
}
}