updates to camera-info

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();
 }