for privacy concious ppl you can select to not use the canvas api when uploading media and use the piexif library to strip metadata. This means no extra compression though

Author: marceldobehere

src/app/user/account_settings/page.js

@@ -48,6 +48,7 @@ export default function Home() {
     const [customCss, setCustomCss] = useState("");
     const [generalNotifType, setGeneralNotifType] = useState("none");
     const [newPostNotifType, setNewPostNotifType] = useState("none");
+    const [uploadImagesUsingCanvas, setUploadImagesUsingCanvas] = useState(true);
 
     const [qrSvg, setQrSvg] = useState({html: "", size: "0px"});
 
@@ -86,7 +87,7 @@ export default function Home() {
         setEnabledCustomPostAnimations(LocalSettings.enabledCustomPostAnimations);
         setGeneralNotifType(LocalSettings.generalNotificationType);
         setNewPostNotifType(LocalSettings.newPostNotificationType);
-
+        setUploadImagesUsingCanvas(LocalSettings.uploadImagesUsingCanvas);
     });
 
     return <UnifiedMenu
@@ -158,6 +159,13 @@ export default function Home() {
                             setExtendPostHitbox(yes);
                         }}/><br/>
 
+                        Upload Images using Canvas API: &nbsp;
+                        <input type="checkbox" checked={uploadImagesUsingCanvas} onChange={async (e) => {
+                            const yes = e.target.checked;
+                            await saveLocalSettingsKey("uploadImagesUsingCanvas", yes);
+                            setUploadImagesUsingCanvas(yes);
+                        }}/><br/>
+
                         {GlobalStuff.loggedIn ?
                             <>
                                 <br/>

src/lib/localSettings.js

@@ -16,6 +16,7 @@ export let LocalSettings = {
     overrideShowGlobalFeed: false,
     generalNotificationType: "none",
     newPostNotificationType: "none",
+    uploadImagesUsingCanvas: true,
 };
 
 async function customCssReady() {
@@ -101,6 +102,7 @@ export async function loadLocalSettings() {
     LocalSettings.overrideShowGlobalFeed = await loadKeyOrDefault("overrideShowGlobalFeed", false);
     LocalSettings.generalNotificationType = await loadKeyOrDefault("generalNotificationType", "none");
     LocalSettings.newPostNotificationType = await loadKeyOrDefault("newPostNotificationType", "none");
+    LocalSettings.uploadImagesUsingCanvas = await loadKeyOrDefault("uploadImagesUsingCanvas", true);
 
     console.info("> Loaded Local Settings");
 }
@@ -117,6 +119,7 @@ export async function saveLocalSettings() {
     await saveKey("overrideShowGlobalFeed", LocalSettings.overrideShowGlobalFeed);
     await saveKey("generalNotificationType", LocalSettings.generalNotificationType);
     await saveKey("newPostNotificationType", LocalSettings.newPostNotificationType);
+    await saveKey("uploadImagesUsingCanvas", LocalSettings.uploadImagesUsingCanvas);
 
     await updateCustomCss();
 

src/lib/publicInfo/publicInfoUtils.js

@@ -7,6 +7,8 @@ import {CoolCache} from "@/lib/coolCache";
 import {uploadData} from "@/lib/fileUtils";
 import {doesImageExist} from "@/lib/markedExtension";
 import {SpinActivity} from "@/lib/spinner";
+import {LocalSettings} from "@/lib/localSettings";
+import piexif from "@/lib/piexif/piexif";
 
 function dataURLtoFile(dataurl, filename) {
     var arr = dataurl.split(","),
@@ -21,7 +23,7 @@ function dataURLtoFile(dataurl, filename) {
 }
 
 
-async function stripExifDataAndRotateCorrectly(ogDataUrlImage) {
+async function stripExifRotateAndCompressCanvas(ogDataUrlImage) {
     return await new Promise((res, rej) => {
             const image = new Image();
             image.onload = () => {
@@ -59,6 +61,35 @@ async function stripExifDataAndRotateCorrectly(ogDataUrlImage) {
 }
 
 
+async function stripExifRotateNoCanvas(ogDataUrlImage) {
+    const exif = piexif.load(ogDataUrlImage);
+    console.log(exif);
+
+    let orientation = exif["0th"]["274"]; // piexif.ImageIFDName.Orientation
+    console.log("Orientation: ", orientation);
+
+    // remove EXIF data
+    const newData = piexif.remove(ogDataUrlImage);
+
+    // Add Rotation data
+    const newData2 = piexif.insert(
+        piexif.dump({
+            "0th": {
+                "274": orientation,
+            }
+        }),
+        newData
+    );
+
+    // Check EXIF data
+    const exif2 = piexif.load(newData2);
+    console.log(exif2);
+
+    // console.log("Size 1: ", e.target.result.length);
+    // console.log("Size 2: ", resData.length);
+    return newData2;
+}
+
 export async function uploadMediaToServer(files) {
     try {
         if (files == undefined)
@@ -78,7 +109,10 @@ export async function uploadMediaToServer(files) {
                 reader.onload = async (e) => {
                     // read EXIF data and dump
                     try {
-                        const resData = await stripExifDataAndRotateCorrectly(e.target.result); // we get a DATA URL
+                        const resData =
+                            LocalSettings.uploadImagesUsingCanvas ?
+                                (await stripExifRotateAndCompressCanvas(e.target.result)) :
+                                (await stripExifRotateNoCanvas(e.target.result)); // we get a DATA URL
 
                         // // Check EXIF data
                         // const exif2 = piexif.load(resData);