js调用手机相机或相册并显示图片

手机浏览器和微信打开网页，并且都支持调用相机拍照和打开相册.

首先查看最终结果:

每次单击“单击以上传”时，都可以选择相册或拍照. 选择后，您可以显示其他图片. 这里没有上传服务器.

点击“重新上传”以清除所有图片.

PC浏览器打开拍照进入相册，类似，但是您只能选择图像文件:

将输入type = file的标签透明度设置为0拍照进入相册，并使用绝对布局用另一个标签覆盖它:

<div id="imgPreview">
    <div id="prompt3">
        <div id="imgSpan">
            点击上传
        </div>
        <input type="file" id="file" class="filepath" onchange="changepic()" accept="image/*">
        <button id="imgSpan" type="button" onclick="clearpic()">重新上传</button>
    </div>
    @*此处用js自动插入图片标签<img src="" id="img3" />*@
</div>

获取图片后，将图片显示在前端:

function changepic() {
    var reads = new FileReader();
    f = document.getElementById('file').files[0];
    reads.readAsDataURL(f);
    reads.onload = function (e) {
        var y = document.createElement('img');
        y.id = "img3";
        y.src = this.result;
        $("#imgPreview").append(y);
    };
};

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/ruanjian/article-258878-1.html