Web开发学习——网页上掉用手机拍照

xiaoxiao2021-03-01  12

    最近接了一个新的微信公众号项目,需求和费用比较起来可以说是很让人难堪了。不过还是接了下来。毕竟缺钱留学。

    用户希望能够开发能同时在微信和普通浏览器上浏览的网页,并且不愿意同时开发两套(抛了各种原因),emmm,那么微信的库就不太敢使用了。今天在做的时候发现其中一个拍照的需求。刚开始的时候有点尴尬(好久没开发网页了,有点生疏),刚刚上课上一半忽然想到了解决思路,就偷偷逃课来实现这个功能。

    其实要实现这个可以使用<input>标签来实现。具体代码如下    

<input type="file" capture="image/*" capture="camera"/>

    亲测放到服务器上后在手机上可以实现功能,当然效果非常丑。

    稍作修改

<label class=“newlabelstyle”> <input type="file" style="position:absolute;left:-9999;visibility:hidden;" id="capture" capture="camera" accept="image/*" class="weui-vcode-btn"/> <span>获取图片</span> </label>

    这里我们把input隐藏了,但是点击时依旧能够触发摄像头,现在效果是这样的

    当然你们可以通过修改label的样式,实现各种视觉效果哈。就到这里了。

    DRW

转载请注明原文地址: https://www.6miu.com/read-3199944.html

最新回复(0)