Wie man ein Bild in base64 umwandelt und es im lokalen Speicher speichert

Question

Wie kann ich das ausgewählte Bild in base64 konvertieren und es dann im lokalen Speicher für die spätere Verwendung speichern.

var image = document.getElementById("image"); 
    image.addEventListener('change', function() { 
    //How to 
    }); 

Answer 1

Gerade in diesem Beitrag sehen, erklären sie genau das, was Sie brauchen: https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

Aber statt Base64-Codierung, extrahieren sie die Bilddaten Leinwand mit + toDataURL(), die die Bilddaten von Blob konvertieren zur Daten-URL

Seien Sie vorsichtig mit Bildern, die von externen Websites geladen werden, die crossOrigin-Richtlinie kann einen Sicherheitsfehler auslösen. (Siehe 22710627)

// Get a reference to the image element 
var elephant = document.getElementById("elephant"); 

// Take action when the image has loaded 
elephant.addEventListener("load", function() { 
    var imgCanvas = document.createElement("canvas"), 
     imgContext = imgCanvas.getContext("2d"); 

    // Make sure canvas is as big as the picture 
    imgCanvas.width = elephant.width; 
    imgCanvas.height = elephant.height; 

    // Draw image into canvas element 
    imgContext.drawImage(elephant, 0, 0, elephant.width, elephant.height); 

    // Get canvas contents as a data URL 
    var imgAsDataURL = imgCanvas.toDataURL("image/png"); 

    // Save image into localStorage 
    try { 
     localStorage.setItem("elephant", imgAsDataURL); 
    } 
    catch (e) { 
     console.log("Storage failed: " + e); 
    } 
}, false); 

this helps you :)

Answer 2

How to convert image into base64 string using javascript

Sie die HTML5 für sie verwenden können:

Erstellen Sie eine Leinwand, laden Sie Ihr Bild hinein und dann verwenden toDataURL(), um die base64-Repräsentation zu erhalten (tatsächlich ist es eine data: URL, aber sie enthält das base64-codierte Bild).

diese Daten dann an lcoalStorage speichern:

localStorage.setItem('imgBase64', this.yourVariable);