Cannot set property 'src' of null in JavaScript

Question

I'm in the middle of changing some existing javascript code which exports images inside a HTML document to a word document. The new functionality is going to capture canvas data inside HTML, convert it to .png and then export however I'm getting 'Cannot set property 'src' of null' when the code reaches this part:

        //Capture all canvas data
        var canvasData = markup.find('canvas');

        var tempImage = new Image();

        ////Array to hold of the images
        var imageArray = Array();
        for (var i = 0; i < canvasData.length; i++) {
            tempImage.src = canvasData[i].toDataURL("image/png");
            imageArray[i] = tempImage;
            tempImage = null;
        }

Any help would be greatly appreciated!

Answer 1

As you can see you are nullifying tempImage inside the loop, after the first iteration it will be assigned a null value, so in the next iteration you'll be trying to set the src for null. that is why you are getting this error. Take var tempImage = new Image(); inside the loop.

   for (var i = 0; i < canvasData.length; i++) {
       var tempImage = new Image();
        tempImage.src = canvasData[i].toDataURL("image/png");
        imageArray[i] = tempImage;
        tempImage = null;
    }