Take image as input from users

Question

I need to change a image with javascript.I am creating a website that creates a webpage for the user and I don't know how to get an image from the user and insert it into the image which I had shown as a sample image.Pls answer

please share some code so the community can see, what you already tried. — Homungus, Jun 17 '20 at 06:49
Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output using the `[<>]` snippet editor. — mplungjan, Jun 17 '20 at 06:51

score 0 · Answer 1 · answered Jun 17 '20 at 06:51

Here is the html and JavaScript I hope this will solve your problem.

function showImage(src, target) {
            var fr = new FileReader();

             fr.onload = function(){
      target.src = fr.result;
    }
           fr.readAsDataURL(src.files[0]);

        }
        function putImage() {
            var src = document.getElementById("select_image");
            var target = document.getElementById("target");
            showImage(src, target);
        }

 <img id="target" />
<input type="file" id="select_image" name="image" onchange="putImage()" />

score 0 · Answer 2 · answered Jun 17 '20 at 06:58

0

this will help the user to choice image or file from their local PC's. also refer this link for learn more about HTML Tags w3refer

<form>
 <input type="file">
</form>

answered Jun 17 '20 at 06:58

CodeBug

1,649
1
8
23

Take image as input from users

2 Answers2