diff --git a/site/camera-info/index.html b/site/camera-info/index.html
index 3e9157b..6a78a1e 100644
--- a/site/camera-info/index.html
+++ b/site/camera-info/index.html
@@ -5,6 +5,7 @@
+
@@ -27,7 +28,7 @@
-
+
diff --git a/site/camera-info/main.css b/site/camera-info/main.css
index 1fd78f0..08c05c6 100644
--- a/site/camera-info/main.css
+++ b/site/camera-info/main.css
@@ -87,8 +87,5 @@ video.unbounded {
}
#final {
- max-width: 100vw;
border: 1px solid black;
- max-width: 80vw;
- max-height: 80vh;
}
diff --git a/site/camera-info/main.js b/site/camera-info/main.js
index c25e06a..ad70216 100644
--- a/site/camera-info/main.js
+++ b/site/camera-info/main.js
@@ -87,27 +87,46 @@ window.app = {
},
"finalresult": {
enter() {
- let canvas = document.getElementById("final");
- let ctx = canvas.getContext("2d");
- ctx.fillStyle = "white";
- ctx.fillRect(0, 0, 1440, 960);
- ctx.font = "bold 96px sans-serif";
- ctx.fillStyle = "black";
- ctx.fillText(document.getElementById("title").value, 0, 96);
- ctx.font = "bold 48px sans-serif";
- ctx.fillText(new Date().toLocaleString(), 0, 152);
- let lat = document.getElementById("lat").value;
- let long = document.getElementById("long").value;
- reverse_geocode(lat, long).then(res => {
- ctx.fillText(res, 0, 208);
- });
- ctx.fillText("https://maps.google.com/maps?q=" + lat + "," + long, 0, 256);
- ctx.fillText("Notes: " + document.getElementById("notes").value, 0, 308);
- let image = document.getElementById("precanvas");
- ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
- maps_static(lat, long, img => {
- ctx.drawImage(img, 365 * 2, 320);
- });
+ (async () => {
+ let iframe = document.getElementById("final");
+ const pdfDoc = await PDFLib.PDFDocument.create();
+ const page = pdfDoc.addPage([1440, 960]);
+ page.moveTo(0, 960 - 96);
+ page.drawText(document.getElementById("title").value, { size : 96 });
+ page.moveTo(0, 960 - 152);
+ page.drawText(new Date().toLocaleString(), { size : 48});
+ let lat = document.getElementById("lat").value;
+ let long = document.getElementById("long").value;
+ let res = await reverse_geocode(lat, long);
+ page.moveTo(0, 960 - 208);
+ page.drawText(res, { size : 48 });
+ page.moveTo(0, 960 - 256);
+ page.drawText("https://maps.google.com/maps?q=" + lat + "," + long, { size : 48 });
+ page.moveTo(0, 960 - 308);
+ page.drawText("Notes: " + document.getElementById("notes").value, { size : 48 });
+ let static = await maps_static(lat, long);
+ let embeddedImage = await pdfDoc.embedPng(static);
+ let dims = embeddedImage.scale(1);
+ page.drawImage(embeddedImage, {
+ x: 365 * 2,
+ y: 960 - 320 - dims.height,
+ width : dims.width,
+ height : dims.height
+ });
+ let image = document.getElementById("precanvas");
+ let static2 = await fetch(image.toDataURL('image/png')).then(res => res.arrayBuffer());
+ let embeddedImage2 = await pdfDoc.embedPng(static2);
+ let dims2 = embeddedImage2.scale(1);
+ page.drawImage(embeddedImage2, {
+ x: 0,
+ y: 960 - 320 - dims2.height / dims2.width * 720,
+ width : 720,
+ height : dims2.height / dims2.width * 720
+ });
+ //ctx.drawImage(image, 0, 320, 720, image.height / image.width * 720);
+ const dataURI = await pdfDoc.saveAsBase64({ dataUri: true });
+ iframe.src = dataURI;
+ })()
},
exit() {
@@ -125,15 +144,8 @@ async function reverse_geocode(lat, long) {
}
-function maps_static(lat, long, cbk) {
- let img = document.createElement("img");
- document.body.appendChild(img);
- img.classList.add("offscreen");
- img.src = "https://maps.googleapis.com/maps/api/staticmap?size=710x600&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long;
- img.crossOrigin = "anonymous";
- img.onload = () => {
- cbk(img);
- };
+async function maps_static(lat, long) {
+ return await fetch("https://maps.googleapis.com/maps/api/staticmap?size=710x600&key=AIzaSyD_zbdxwN7_aOMNH69eAL9bSS814Ix-UM8&markers=label:S%7C" + lat + "," + long).then((res) => res.arrayBuffer());
}
@@ -148,14 +160,14 @@ function getFilename() {
title += '-';
}
}
- return title + ".png";
+ return title + ".pdf";
}
function download() {
let canvas = document.getElementById("final");
let anchor = document.createElement("a");
- anchor.href = canvas.toDataURL();
+ anchor.href = canvas.src;
anchor.download = getFilename();
anchor.click();
}
\ No newline at end of file