HTML: Hochgeladenes Foto in LocalStorage speichern

Question

Ich erstelle eine Webanwendung, mit der Benutzer ein Foto mit der eingebauten Kamera aufnehmen und das Foto in die Anwendung hochladen können, in der das Foto gespeichert wird. Derzeit verwende ich die unten stehende Codezeile, um das Foto zu erfassen und hochzuladen.

<input type="file" accept="image/*"> 

Wie speichere ich das Bild in localStorage? Gibt es eine Möglichkeit, diese Funktion in Javascript innerhalb des HTML zu implementieren?

Answer 1

versuchen, etwas wie folgt aus:

const input = document.getElementsByTagName('input')[0]; // or id or whatever selector you want to use 
 

 
input.onchange = (function(e) { 
 
    const file = e.path[0].files[0]; 
 
    const reader = new FileReader(); 
 

 
    reader.readAsDataURL(file); 
 

 
    reader.onload = function() { 
 
    const id = 'blobid' + (new Date()).getTime(); 
 
    const blobCache = tinymce.activeEditor.editorUpload.blobCache; 
 
    const base64 = reader.result.split(',')[1]; 
 
    localStorage.setItem('imageString', base64); 
 
    }; 
 
});