1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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:
    536
    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