保存和显示从输入type=file中捕获的图像

Question

我有一个从可用的相机功能捕获图像的网页。对于网络版本，它只是简单地将视频捕获放在画布上。然而，对于一部手机，我使用<input class="btn btn-info" type="file" accept="image/*" id="cameraCapture" capture="camera">捕捉一张照片。它要求用户要么使用手机的摄像头捕捉图像，要么从其文件系统/库上传等等。一旦点击图像，它只需将图像的名称放在按钮旁边。是否有方法访问此图像并将其显示在同一页中。

提前感谢

Answer 1

您可以使用FileReader对象使用JS来完成这一任务。

看看这个答案：preview-an-image-before-it-is-uploaded

我希望它能帮上忙

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