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

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

• javascript
• jquery
• html
• input-type-file

• 4 Possible duplicate of Preview an image before it is uploaded – Heretic Monkey Commented Apr 7, 2017 at 15:09
• 1 This answer could also help : stackoverflow./a/43161974/2159528 – Louys Patrice Bessette Commented Apr 8, 2017 at 1:10
• can you help me with this question please stackoverflow./questions/69351438/… – artiest Commented Sep 27, 2021 at 18:22

2 Answers 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

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);
}