1

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.

Mosset Jérémie
  • 310
  • 1
  • 4
  • 20
  • While the answer provided works, it should be noted that browsers have a limited amount of bits you can store locally. So it is not a good idea to do that if you have big images or just too many. I would advice uploading into a temporary directory on the server to do what I wanted to. – Mosset Jérémie Feb 08 '18 at 15:46

1 Answers1

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;
};
Rahman
  • 282
  • 1
  • 10