print update

answerquest · answerquest · commit 74b889e16c7e · 2024-02-26T09:35:29.000+05:30
diff --git a/js/print.js b/js/print.js
@@ -297,29 +297,18 @@ function flip(){
 	changeDimensions();
 }
 
-function save_image() {
-	console.log('hello');
+function save_image(format='png') {
 	$('#save_image_status').html("Generating image..");
 	leafletImage(map, function(err, canvas) {
 		// note: webp format is possible
-		var dataURL = canvas.toDataURL('image/png');
+		var dataURL = canvas.toDataURL(`image/${format}`);
 		var link = document.createElement('a');
-		link.download = 'map.png'; // Set the download filename
+		link.download = `map.${format}`; // Set the download filename
 		link.href = dataURL; // Set the data URL as the link href
 		// Trigger a click event on the link to start the download
 		document.body.appendChild(link);
 		link.click();
 		document.body.removeChild(link);
 		$('#save_image_status').html("Image saved.");
-		// var img = document.createElement('img');
-		// var dimensions = map.getSize();
-		// img.width = dimensions.x;
-		// img.height = dimensions.y;
-		// img.src = canvas.toDataURL();
-		// document.getElementById('images').innerHTML = '';
-		// document.getElementById('images').appendChild(img);
-		// console.log(img.src);
-		// console.log(canvas);
-		// console.log('eh?');
 	});
 }
diff --git a/print.html b/print.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-<title>Map Printer</title>
+<title>Large Map Printer / Exporter</title>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
@@ -84,7 +84,7 @@
 <div class="container-fluid no-print mt-5">
 <div class="row">
 <div class="col-md-4">
-    <h1>Map Printer</h1>
+    <h1>Large Map Printer / Exporter</h1>
     <div class="card card-body mb-4">
     <ul>
         <li>Drag-drop a shape file (preferably .geojson format) onto this map to display its border.</li>
@@ -95,12 +95,13 @@ <h1>Map Printer</h1>
     </ul>
     </div>
     
-    <p><button onclick="zoomFit()" class="btn btn-warning">Fit map to shape</button>
-    &nbsp;&nbsp; 
-    <button onclick="window.print()" class="btn btn-primary">Print</button>
+    <p>
     &nbsp;&nbsp; 
-    <button onclick="save_image()" class="btn btn-success">Save Image</button>
-    &nbsp;&nbsp;<span id="save_image_status"></span>
+    <button onclick="save_image('png')" class="btn btn-outline-success">Save Image as PNG</button>
+    &nbsp;&nbsp;
+    <button onclick="save_image('webp')" class="btn btn-outline-success">Save Image as WEBP</button>
+    &nbsp;&nbsp;
+    <span id="save_image_status"></span>
     </p>
     
     
@@ -142,6 +143,10 @@ <h3>Print page size</h3>
     <p><b>Note:</b> The presets and css scripting for it are approximations and best-effort attempts. <br>
     When you go for the print dialogue and choose your page size etc, there will probably be some mis-match.<br>
     Please see the print-preview, then come back here and tweak the width and heigth to get it right. </p>
+
+    <p><button onclick="zoomFit()" class="btn btn-warning">Fit map to shape</button>
+        &nbsp;&nbsp; 
+    <button onclick="window.print()" class="btn btn-primary">Print</button></p>
 </div>
 <div class="col-md-3">
     <h3>Shape</h3>
