how to send image from one page to other in html?

I went through your code and found that you are storing image in cookie and retrieving in second page. One suggestion for you it is better to store image in HTML 5 local storage. Because each request cookie value goes to server - it may create performance overhead.

Default 1

bannerImage = document.getElementById('pic');

imgData = getBase64Image(bannerImage);

localStorage.setItem("imgData", imgData);

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,/, "");

}

Default 2

var dataImage = localStorage.getItem('imgData');

bannerImg = document.getElementById('tableBanner');

bannerImg.src = "data:image/png;base64," + dataImage;

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Manas Mohapatra11y ago
I went through your code and found that you are storing image in cookie and retrieving in second page. One suggestion for you it is better to store image in HTML 5 local storage. Because each request cookie value goes to server - it may create performance overhead.

Default 1

bannerImage = document.getElementById('pic');
imgData = getBase64Image(bannerImage);
localStorage.setItem("imgData", imgData);

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,/, "");
}

Default 2

var dataImage = localStorage.getItem('imgData');
bannerImg = document.getElementById('tableBanner');
bannerImg.src = "data:image/png;base64," + dataImage;