JS Function to swap Image

Question

Using a pre-trained model for image classification, I created a webpage that in theory will allow the user to browse their computer for a image and when that image is selected, it is automatically processed and the top three responses for what that image most likely is displayed on the webpage along with the probability for each. My JS function is probably very wrong, I’m somewhat self-taught. I’m also using materializecss and tensorflow.js if it helps.

I’m having trouble with changing the image I currently have hard coded there with the chosen image of the user.

HTML

<div name="imagePost" class="offset-s1 col s6">
   <img class="responsive-img" id="changeImage" src="images/dog.jpg" alt="description">
   <input type="file"  name="pickImage" onchange="swapImage(pickImage)">
</div>

JS Function

function swapImage (pickImage) {
    var image_toShow = pickImage;

    document.getElementById('changeImage').innerHTML = image_toShow;
}

https://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded I know answer is jQuery, but basic idea on using file reader — epascarello, Dec 04 '19 at 20:02
Are you just setting the innerHTML to what ever it is that is supplied in the argument? Or, are you building an image tag? — joeldesante, Dec 04 '19 at 21:29

score 0 · Answer 1 · answered Dec 04 '19 at 22:13

Here is how you can swap the image

function swapImage(event) {
  var selectedFile = event.target.files[0];
  var reader = new FileReader();

  const img = document.getElementById("changeImage");

  reader.onload = function(event) {
    img.src = event.target.result;
  };

  reader.readAsDataURL(selectedFile);
}

score 0 · Accepted Answer · answered Dec 07 '19 at 01:18

Thanks for the help and suggestions. I ended up using a file reader, eventlisteners, and actually creating the img tag in another js function. Ill share it below incase it could help others. So the html part just has a empty div and js reads the input file and creates a img tag with the uploaded photo.

<div name="imagePost" class="offset-s1 col s6">
                <fieldset>
                    <div id="changeImage">

                    </div>
                </fieldset>
                <input type="file"  id="pickImage">
                <a class="btn-large black col s4 offset-s1 unselect" onclick="app()">Calculate</a>
            </div>
        </div>

window.onload=function()
{
  var y = document.getElementById("pickImage");
  y.addEventListener('change', loadimage, false);
}

function imageHandler(e2) 
{ 
  var store = document.getElementById('changeImage');
  store.innerHTML='<img id="newImage" class="responsive-img" src="' + e2.target.result +'" alt="The image here is interchangeable, allowing for users to process many different images using the machine learning model.">';
}

function loadimage(e1)
{
  var filename = e1.target.files[0]; 
  var fr = new FileReader();
  fr.onload = imageHandler;  
  fr.readAsDataURL(filename); 
}

JS Function to swap Image

2 Answers2