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

保存并显示从input type = file捕获的图像

2 个答案: