From b14a8a267ab0079c856860197d1203d417c06844 Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Fri, 3 Jan 2020 17:37:28 +0200
Subject: [PATCH] Render uploaded images in canvas to remove exif

---
 client/components/Windows/Settings.vue | 23 ++++++++++++++
 client/js/settings.js                  |  3 ++
 client/js/upload.js                    | 42 ++++++++++++++++++++++++++
 3 files changed, 68 insertions(+)

diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index d7b1788a..6420e88a 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -229,6 +229,29 @@
 				</div>
 			</template>
 
+			<div
+				v-if="$store.state.settings.advanced && $store.state.serverConfiguration.fileUpload"
+			>
+				<h2>File uploads</h2>
+				<div>
+					<label class="opt">
+						<input
+							:checked="$store.state.settings.uploadCanvas"
+							type="checkbox"
+							name="uploadCanvas"
+						/>
+						Attempt to remove metadata from images before uploading
+						<span
+							class="tooltipped tooltipped-n tooltipped-no-delay"
+							aria-label="This option renders the image into a canvas element to remove metadata from the image.
+This may break orientation if your browser does not support that."
+						>
+							<button class="extra-help" />
+						</span>
+					</label>
+				</div>
+			</div>
+
 			<template v-if="!$store.state.serverConfiguration.public">
 				<h2>Push Notifications</h2>
 				<div>
diff --git a/client/js/settings.js b/client/js/settings.js
index 2772abe5..fc2c1cc7 100644
--- a/client/js/settings.js
+++ b/client/js/settings.js
@@ -92,6 +92,9 @@ export const config = normalizeConfig({
 	media: {
 		default: true,
 	},
+	uploadCanvas: {
+		default: true,
+	},
 	userStyles: {
 		default: "",
 		apply(store, value) {
diff --git a/client/js/upload.js b/client/js/upload.js
index 85f7da3c..3b2e164c 100644
--- a/client/js/upload.js
+++ b/client/js/upload.js
@@ -130,6 +130,48 @@ class Uploader {
 
 	uploadNextFileInQueue(token) {
 		const file = this.fileQueue.shift();
+
+		if (
+			store.state.settings.uploadCanvas &&
+			file.type.startsWith("image/") &&
+			!file.type.includes("svg")
+		) {
+			this.renderImage(file, (newFile) => this.performUpload(token, newFile));
+		} else {
+			this.performUpload(token, file);
+		}
+	}
+
+	renderImage(file, callback) {
+		const fileReader = new FileReader();
+
+		fileReader.onabort = () => callback(file);
+		fileReader.onerror = () => fileReader.abort();
+
+		fileReader.onload = () => {
+			const img = new Image();
+
+			img.onerror = () => callback(file);
+
+			img.onload = () => {
+				const canvas = document.createElement("canvas");
+				canvas.width = img.width;
+				canvas.height = img.height;
+				const ctx = canvas.getContext("2d");
+				ctx.drawImage(img, 0, 0);
+
+				canvas.toBlob((blob) => {
+					callback(new File([blob], file.name));
+				}, file.type);
+			};
+
+			img.src = fileReader.result;
+		};
+
+		fileReader.readAsDataURL(file);
+	}
+
+	performUpload(token, file) {
 		this.xhr = new XMLHttpRequest();
 
 		this.xhr.upload.addEventListener(