欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js 调用手机摄像头或相册并展示图片

程序员文章站 2022-05-18 20:56:58
效果图 手机浏览器、微信打开该网页,都支持调用摄像头拍照和打开相册。 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,此处没有做上传服务器。 点击“重新上传”,清空所有图片。 PC浏览器打开,类似,不过只能选择图片文件: 代码 把input type=file ......

 

效果图

手机浏览器、微信打开该网页,都支持调用摄像头拍照和打开相册。

先看最终结果: 

 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,此处没有做上传服务器。

点击“重新上传”,清空所有图片。

js 调用手机摄像头或相册并展示图片

 

 

pc浏览器打开,类似,不过只能选择图片文件:

js 调用手机摄像头或相册并展示图片

 

 

 代码

 

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

 

通过遍历删除第一个以外的所有标签(第一个标签是上传和清空的按钮):

function clearpic() {
    var x = document.getelementbyid('imgpreview');
    var count = x.childelementcount;
    alert(count);
    for (var i = 1; i < count;i++) {   
        x.removechild(x.children[1]);
    }
};

 

css 样式:

#imgpreview {
    width: 100%;
    height: 120px;
    margin: 10px auto 0px auto;
    border: 0.5px solid #ced4da;
    text-align: left;
    vertical-align: central;
}

#prompt3 {
    height: 30px;
    width: 200px;
    position: relative;
}

#imgspan {              -》》 两个按钮的样式
    position: relative;
    height: 30px;
    background: #fff; /*#ccc;*/
    border: 1px solid #333;
    left: 0;
    top: 1px;
    padding: 5px 10px;
    overflow: hidden;
    text-decoration: none;
    text-indent: 0;
    line-height: 20px;
    border-radius: 20px;
    color: #333;
    font-size: 13px;
    display: inline;
}

.filepath {
    position: absolute;    -》》绝对布局
    left: 0;
    top: 0;
    height: 30px;
    width: 80px;
    opacity: 0;          -》》 透明度设置为0,即隐藏
}

#img3 {
    position: relative;
    height: 90px;
    width: 90px;
    padding: 2px;
    display: inline;       -》》inline是为了让所有图片不换行
}