save and display image captured from input type=file

Question

I have a webpage with capture image from the Available camera feature. For the web version it simply places the video capture onto a canvas. However for a phone, I am using <input class="btn btn-info" type="file" accept="image/*" id="cameraCapture" capture="camera"> to capture a picture. It asks the user to either capture the image using the phone's camera or upload from its filesystem/gallery etc. Once the image is clicked it simply places the image's name next to the button. Is there a way to access this image and display it in the same page.

Thanks in advance

Possible duplicate of [Preview an image before it is uploaded](http://stackoverflow.com/questions/4459379/preview-an-image-before-it-is-uploaded) — Heretic Monkey, Apr 07 '17 at 15:09
This answer could also help : http://stackoverflow.com/a/43161974/2159528 — Louys Patrice Bessette, Apr 08 '17 at 01:10
can you help me with this question please https://stackoverflow.com/questions/69351438/how-to-put-captured-image-from-webcam-into-input-file — artiest, Sep 27 '21 at 18:22

score 2 · Answer 1 · edited May 23 '17 at 12:02

2

You can do that with JS using FileReader object.

Take a look at this answer: preview-an-image-before-it-is-uploaded

I hope it helps

edited May 23 '17 at 12:02

Community

1
1

answered Apr 07 '17 at 14:53

Nadia Ghebreial

168
2
10

Please don't use the Answer field for links to other questions' answers. Once you have enough reputation, you can add comments, and after that you can flag questions as duplicates. – Heretic Monkey Apr 07 '17 at 15:12

score 2 · Answer 2 · answered May 29 '18 at 12:35

2

var input = document.querySelector('input[type=file]'); 

input.onchange = function () {
    var file = input.files[0];


    drawOnCanvas(file);   
};

function drawOnCanvas(file) {
    var reader = new FileReader();

    reader.onload = function (e) {
        var dataURL = e.target.result,
                c = document.querySelector('canvas'), 
                ctx = c.getContext('2d'),
                img = new Image();

        img.onload = function() {
            c.width = img.width;
            c.height = img.height;
            ctx.drawImage(img, 0, 0);
        };

        img.src = dataURL;
    };

    reader.readAsDataURL(file);
}

answered May 29 '18 at 12:35

olatunji

21
1

2

No idea to answer a 1y old question, beside `URL.createObjectURL` would be a better option then using the FileReader... – Endless May 29 '18 at 12:39
1

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. – Thomas Flinkow May 29 '18 at 12:40

save and display image captured from input type=file

2 Answers2