0

So I've tried unsuccessfully to copy the src of a dynamically created image through javascript in my index.html file, and I would like to create a new image in another html page where the src from the original is copied over and display that image. Any input or suggestions would be appreciated. Relevant code below:

Full script on first page:

window.onload = function() {

var fileInput = document.getElementById('fileInput');
var fileDisplayArea = document.getElementById('fileDisplayArea');
var filecanvas = document.getElementById('check');
var context = filecanvas.getContext('2d');


fileInput.addEventListener('change', function(e) {
    var file = fileInput.files[0];
    var imageType = /image.*/;

    if (file.type.match(imageType)) {
        var reader = new FileReader();

        reader.onload = function(e) {
            fileDisplayArea.innerHTML = "";


            var img = new Image();
            img.src = reader.result;
            img.id = 'newimg';
            sessionStorage.setItem("CachedImage", img.src);



            fileDisplayArea.appendChild(img);


            var canvasimage = new Image();
            canvasimage.onload = function () {
            context.drawImage(canvasimage,100,200);
            };
            canvasimage.src = reader.result;
        }

        reader.readAsDataURL(file);
        window.open('../markup/image.html');
    } else {
        fileDisplayArea.innerHTML = "File not supported!"
    }

});

}

Full script + html on second page:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>

       window.onload = function() {
           var newimage = document.getElementById('ni');
           newimage.src = sessionStorage.getItem("CachedImage");
           newimage.alt = 'Cannot be displayed';
       };

</script>
<img id='ni' src="" />
</body>
</html>
zeeb01
  • 3
  • 3
  • 1
    Different pages do not share DOM! You need to somehow share the image src. Through LocalStorage/cookie/URL/database, etc. – Joy Dec 24 '14 at 03:24
  • document.getElementById('newimg'); will not return anything in the second page as your newimg is in the first page – Sherin Mathew Dec 24 '14 at 03:24
  • you'll need to store the image (or it's source url) somewhere from the first page then retrieve it on the second page. You could use cookies or a database or something but you have to store it somewhere – Wesley Smith Dec 24 '14 at 03:25
  • save your image to local server then reference it via relative URL addressing – agentpx Dec 24 '14 at 03:42

2 Answers2

0

You can do this on both Client side and server side. In client side you can use session storage or local storage option. If you want to retrieve data from server side then you need to create a function to return the value. Later you can access data from it.

Since you are passing only the path of a file, I would suggest you to use client side storage like sessions.

Source code :
javascript code in first page:

var img = new Image(); 
img.src = reader.result;
img.id = 'newimg';
sessionStorage.setItem("CachedImage", img.src); // save image source into sessions

javascript code in second page:

 var newimage = new Image();
 newimage.id = 'ni';
 newimage.src = sessionStorage.getItem("CachedImage"); // retrieve image src from sessions
ganesh
  • 228
  • 3
  • 11
  • I've edited my post to show the script I'm using to get the user image. – zeeb01 Dec 24 '14 at 07:19
  • I don't think "reader.result" in page1 will return the correct path.you can add a alert to find the value. Eg: alert(reader.result); – ganesh Dec 24 '14 at 09:27
  • you should also check this link : http://stackoverflow.com/questions/16710302/html5-file-api-with-filename-path – ganesh Dec 24 '14 at 09:31
  • After getting file path, Pls be mindful to escape blackslash in them before you save them to sessions.Eg: to save '\' in a string you need to enter '\\' – ganesh Dec 24 '14 at 09:40
  • Thanks for the help/advice, I'll continue trying to get this to work. – zeeb01 Dec 24 '14 at 20:19
0

The correct way send http headers with caching. But i wrote plugin of caching images in localStorage 2,2kb. jQueryImageCaching Usage:

<img data-src="path/to/image">

<script>
    $('img').imageCaching();
</script>
moledet
  • 929
  • 11
  • 19