Store local image to upload in another page

Question

I have to make an image input that will not upload the image. The images will be used in another page where it will be edited(cropped and draw over) and then uploaded.

I don't know how to do that, do you have any ideas? I'll probably be using this plugin.

Answer 1

you have get the image using getElementByID. convert the image in to base64 and save in local storage

userimage = document.getElementById('imageId');
imageData = getBase64Image(userimage);
localStorage.setItem("imageData", imageData);

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

insert the script in your second page for getting the image from localstorage and set to the image src

window.onload = function() {
 var getpicture = localStorage.getItem('imageData');
 var image = document.createElement('img');
 image.src = getpicture;
};