Images > 6MB are now compressed to save space

index.html

@@ -8,7 +8,7 @@
 	<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
   
   <!--meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' https://code.jquery.com 'unsafe-inline' 'unsafe-eval'; media-src *; img-src 'self' http://opencache.statkart.no ; connect-src 'self' http://logic.vips.nibio.no   https://logic.vips.nibio.no  http://vipslogic-local.no  https://opencache.statkart.no;"-->
-<meta http-equiv="Content-Security-Policy" content="default-src * data: 'unsafe-inline' 'unsafe-eval';">
+<meta http-equiv="Content-Security-Policy" content="default-src * data: blob: 'unsafe-inline' 'unsafe-eval';worker-src blob:">
     <meta name="description" content="">
     <meta name="author" content="Tor-Einar Skog">
     <title>VIPS Feltobservasjoner</title>

package.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.0.0",
     "@fortawesome/free-solid-svg-icons": "^6.0.0",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "browser-image-compression": "^1.0.17",
     "ekko-lightbox": "^5.3.0",
     "luxon": "^1.26.0",
     "ol": "6.5.0",

src/components/ObservationIllustration.vue

@@ -33,7 +33,8 @@
 </template>
 
 <script>
-import CommonUtil from '@/components/CommonUtil'
+import CommonUtil from '@/components/CommonUtil';
+import imageCompression from 'browser-image-compression';
 
 export default {
 	name:			"ObservationIllustration",
@@ -41,7 +42,8 @@ export default {
 	props:			{observationIllustration: Object},
 	data() {
 		return {
-			imageBase64Data: ""
+			imageBase64Data: "",
+			maxImageSizeMB: 6.0
 		};
 	},
 	watch: {
@@ -51,9 +53,43 @@ export default {
 		// mounted
 		observationIllustration: function(val, oldVal){
 			this.getObservationIllustrationDataFromStore();
+			
+		},
+		imageBase64Data(newVal, oldVal)
+		{
+			// Check image size and compress to max 10MB
+			if(newVal.length / 1024**2 > this.maxImageSizeMB)
+			{
+				console.info("Image is too big. Compressing");
+				this.compressImage();
+			}
 		}
 	},
 	methods: {
+		async compressImage(){
+			const base64Response = await fetch(this.imageBase64Data);
+			const imageBlob = await base64Response.blob();
+			//console.info(imageBlob);
+			const blob = await imageCompression(
+						imageBlob,
+						{
+							maxSizeMB: this.maxImageSizeMB * 0.75 // Approximate size difference between jpg and base64
+						}
+					);
+			var convertBlobToBase64 = (blob) => new Promise((resolve, reject) => {
+			    const reader = new FileReader;
+			    reader.onerror = reject;
+			    reader.onload = () => {
+			        resolve(reader.result);
+			    };
+			    reader.readAsDataURL(blob);
+			});
+			
+			const base64String = await convertBlobToBase64(blob);
+			this.imageBase64Data = base64String;
+			this.updateImageInIndexedDB();
+			//console.info("New image size=" + this.imageBase64Data.length / 1024**2);
+		},
 		handleDeleteImageRequest(){
 			if(confirm(this.$i18n.t("photo.modal.deleteprompt")))
 			{
@@ -68,7 +104,6 @@ export default {
 		handleImageClick() {
 			this.$emit("illustrationClicked", this.imageBase64Data);
 			document.getElementById("observationModal").style.display="block";
-			//$('#observationModal').modal();
 		},
 		/* Fetch the image data (base64 encoded) from the IndexedDB*/
 		getObservationIllustrationDataFromStore()
@@ -128,6 +163,32 @@ export default {
 				this.propagateMetaDataDelete();
 			}
 		},
+		updateImageInIndexedDB()
+		{
+			let dbRequest =  indexedDB.open(CommonUtil.CONST_DB_NAME, CommonUtil.CONST_DB_VERSION);
+			dbRequest.onsuccess = (evt) => {
+				let db = evt.target.result;
+				let transaction    =   db.transaction([CommonUtil.CONST_DB_ENTITY_PHOTO],'readwrite'); 
+				let objectstore    =   transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO);
+				let objectstoreRequest = objectstore.get(this.observationIllustration.observationIllustrationPK.fileName);
+				objectstoreRequest.onsuccess = (event) =>
+				{
+					let observationImage = event.target.result;
+					if(observationImage)
+					{
+						//console.info("Rendering image data for file " + observationImage.illustration.fileName);
+						observationImage.illustration.imageTextData = this.imageBase64Data;
+						transaction.objectStore(CommonUtil.CONST_DB_ENTITY_PHOTO).put(observationImage, observationImage.illustration.fileName).onsuccess = (event) => {
+							//console.info("Image data was successfully updated!");
+						};
+					}
+					else
+					{
+						console.log('Image filename mentioned in Observation, but no image data found');
+					}
+				};
+			}
+		},
 		/** Check requirement for DB upgrade */
 		checkDBUpgrade(dbRequest,entityName, keyName){
 			dbRequest.onupgradeneeded= function (event)