Merge pull request #3764 from thelounge/xpaw/canvas-upload

Render images in canvas before upload to remove exif

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>

client/js/settings.js

@@ -92,6 +92,9 @@ export const config = normalizeConfig({
 	media: {
 		default: true,
 	},
+	uploadCanvas: {
+		default: true,
+	},
 	userStyles: {
 		default: "",
 		apply(store, value) {

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(