Load-Image Library - Reset Or Change Selected File

Discussion in 'JavaScript' started by energylevels, Mar 27, 2020.

0
  1. #1
    Using this library Load-Image here what is the correct way to reset or change the selected image. In my example if I select an image, then change it I end up with previews of both images, need to reset canvas? ... Thanks in advance ....

    <!doctype html>
<html>
<head>
<title>Load Image Test</title>
<meta charset="utf-8">
</head>

<body>
<form>
    <input type="file" id="file-input">
    </form>
    <script src="js/load-image.all.min.js"></script>
    <script>
document.getElementById('file-input').onchange = function (e) {
  loadImage(
    e.target.files[0],
    function (img) {
      document.body.appendChild(img)
    },
    {
     maxWidth: 200,
     orientation: true
    } // Options
  )
}


    </script>
</body>
</html>
    Code (markup):
     
    energylevels, Mar 27, 2020 IP
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #2
    Hi, I've never before used Load-Image library before so if I may just presume that the img variable passed to anonymous function(img) is already a valid (new) image element and so you may use its src to update previous image.
    First, place an empty image HTML element somewhere:
    <img id="myImg" alt="dynamic">
    HTML:
    then use following script instead:
    document.getElementById('file-input').onchange = function(e){
            loadImage(
                e.target.files[0],
                function(img){
                    //document.body.appendChild(img);
                    img.addEventListener('load', function(){
                        document.getElementById('myImg').src = this.src;
                    });
                },
                {
                    maxWidth: 200,
                    orientation: true
                }//Options
            )
        }
    Code (JavaScript):
    Hope this would help.
     
    hdewantara, Mar 27, 2020 IP