how to save domtoimage to localstorage

Wildan Maulana 0
Viewed 36

i use dom-to-image javascript package for making div element to png file, i want to save this png file to locastorage and displayed the image on next page how to make it?

i tried localStorage.setItem('testCart', blob) , and the result value is [HTML object blob], i know this is wrong, what should i do?

here is mycode

function onSaveDpn() {
    domtoimage.toBlob(document.getElementById("custom-cloth"))
    .then(function (blob) {

        // code to download file as .png
        window.saveAs(blob, "sakaw-custom-depan.png");

       // code to save into localstorage
       localStorage.setItem( what should I write? )
    });
}
dom-to-image local-storage dom javascript
1 Answers

Edit, I solved my problem with this

https://www.geeksforgeeks.org/how-to-convert-blob-to-base64-encoding-using-javascript/

this is my new code

function onSaveDpn() {
    domtoimage
    .toBlob(document.getElementById("custom-cloth"))
    .then(function (blob) {
        // window.saveAs(blob, "sakaw-custom-depan.png");
        var reader = new FileReader();
        reader.readAsDataURL(blob);
        reader.onloadend = function () {
            var base64String = reader.result;
            localStorage.setItem("scart", base64String);
        };
    });
}

I hope this can help you guys

Wildan Maulana0
Related