保存并显示从输入类型=文件捕获的图像

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