H5唤起手机相机

2020年7月19日11:05:53 发表评论 阅读(2,748)
本文最后更新于2020年7月19日,已超过一年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

H5唤起手机相机

不知不觉,已经有两月有余没有更新文章,今天来除个草。

如题所说,H5唤起相机是怎么回事呢?在input标签中,我们可以通过改变其属性值达到唤起系统相机的的功能,然后可以通过监听input的change事件拿到拍照的回调,这样我们就可以实现一个H5唤起相机拍照并上传的功能。

具体代码如下:

Html

  1. <div class="content">
  2.     <div class="tips">移动端的H5页面唤起相机拍照,并显示。</div>
  3.     <input type="file"  style="display:none" accept="image/*"  id="uploadPhoto"  capture="camera"/>
  4.     <div class="bottom_click">
  5.         <button onclick="uploadImg()">拍照</button>
  6.         <p>拍摄的图片将显示在下方:</p>
  7.     </div>
  8. </div>
  9. <div class="result">
  10.     <img id="photo_show" />
  11. </div>

Css

  1. .content{
  2.   width: 80%;
  3.   margin20px auto;
  4.   line-height20px;
  5.   color#fc9153;
  6.   font-size14px;
  7. }
  8. #photo_show{
  9.   max-width300px;
  10.   max-height400px;
  11. }
  12. .tips {
  13.   line-height20px;
  14.   color#fc9153;
  15. }
  16. button{
  17.   bordernone;
  18.   color#fff;
  19.   background#fc9153;
  20.   text-aligncenter;
  21.   width50px;
  22.   displayblock;
  23.   border-radius: 5px;
  24. }
  25. .bottom_click{
  26.    margin20px 0;
  27. }
  28. .result{
  29.   width: 100%;
  30.   text-aligncenter;
  31. }

JavaScript

  1. function uploadImg(){
  2.     let photoBtn = document.getElementById("uploadPhoto");
  3.     let photo_show = document.getElementById("photo_show");
  4.     photoBtn.click();
  5.     //监听change事件
  6.     photoBtn.onchange=function(e){
  7.         const file = e.target.files[0];  // 这是上传的文件流数据
  8.         console.log('文件流数据....', file)
  9.         if (file.size > 20 * 1024 * 1024) {
  10.             alert('图片大于20M,请重新上传');
  11.             return;
  12.         }
  13.         const reader = new FileReader()
  14.         reader.readAsDataURL(file)
  15.         reader.onload = (e) => {
  16.             //  e.target.result  这是base64格式的文件
  17.             photo_show.src = e.target.result; //这是base64格式的文件
  18.         }
  19.     }
  20. }

效果图

H5唤起手机相机

戳我体验(手机打开才有效果哦~)

 

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛