Bilder in DataURL umawandeln - JavaScript

Moin,
Ich versuche hochgeladene Dateien über JavaScript in DataURls umzuwandeln. ich habe zu folgenden Code:

window.imageToDataURL = function(file) {
    return new Promise((resolve, reject) => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.onload = function() {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            const dataURL = canvas.toDataURL();
            if (dataURL.startsWith('data:image')) {
                resolve(dataURL);
            } else {
                resolve(null);
            }
        };
        img.onerror = function() {
            resolve(null);
            document.body.removeChild(canvas);
        };
        img.src = URL.createObjectURL(file);
    });
};

Der Code funktionier super. Mein Problem ist nur, dass wenn ich dein 2,14 MB Großes Bild hochlade erhalte ich eine DataURL die gespeichert über 44MB einnimmt. Ich finde das nicht akpeptabel und kann mir auch nicht erklären woher die zusätzlichen daten kommen. Ich brauche die DataURL zwingend, weil ich mit binären Daten nicht arbeiten kann. Ich möchte aber auch nicht unnötig resourcen verschwenden.
Hat Jemand von euch einen Plan, wie ich die DataURL nur mit den daten bekomme die wirklich im bild enthalten sind?

Zitat von Syntafin

Wieso kannst du nicht mit Binärdaten arbeiten?

Deine Dateigröße ist ziemlich schnell erklärt da du ein Canvas erstellst, das dürfte als Bitmap passieren. Wieso nutzt du da kein base64?

dataURLs sind doch base64 codiert oder etwa nicht?

Ich muss die Daten verschlüsseln und dann in einer mysql datenbank speichern können. mit binärdaten wäre alles viel komplizierter. ich brauche einfach eine möglichkeit aus dem File Object einen String zu bekommen den man verarbeiten kann und auch nachher wieder in ein bild umwandeln kann.