zoukankan      html  css  js  c++  java
  • HTML5调用手机摄像机、相册功能 <input>方法

    HTML5调用手机摄像机、相册功能 <input>方法

    原创 2016年11月23日 11:43:40

    最近用MUI框架做webapp项目,在有PLUS环境的基础上能直接调用手机底层的API来使用拍照或从相册选择上传功能!

    在查资料的时候,想起了另一种用input调用摄像和相册功能的方法,之前没有深入了解过,现在整理一下:

    不需要特殊环境,使用input标签 type值为file,可以调用系统默认的照相机、相册、摄像机、录音功能。先上代码:

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

    <input type="file" accept="video/*" capture="camcorder">

    <input type="file" accept="audio/*" capture="microphone">

    accept表示打开的系统文件目录

    capture表示的是系统所捕获的默认设备,camera:照相机;camcorder:摄像机;microphone:录音;

    其中还有一个属性multiple,支持多选,当支持多选时,multiple优先级高于capture,所以只用写成:<input type="file" accept="image/*" multiple>就可以,可以在手机上测试一下。那么选中的图片怎样获取并显示呢?

    html:(css)

    <form id="form1" runat="server">
    <input type='file' id="imgInp" />
    <div>
    <img id="blah" src="#" alt="显示您上传的商品图片" />
    </div>  
    </form>

    js:

    function readURL(input) {
       if (input.files && input.files[0]) {
           var reader = new FileReader();
           reader.onload = function (e) {
               $('#blah').attr('src', e.target.result);
           }
           reader.readAsDataURL(input.files[0]);
       }
    }
    $("#imgInp").change(function(){
       readURL(this);
    });

    样式自己调整,这样就能显示刚拍下的照片或者从相册中选中的图片了。

  • 相关阅读:
    webpack—从零开始配置
    多媒体标签 API(video、audio)
    node 爬虫
    node 操作数据库
    es6+
    UI 组件库 引入使用的问题
    单页应用存在 的问题
    ajax 封装(集中 认证、错误、请求loading处理)
    moment.js 时间库
    文件上传大小被限制的解决方案。
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/8862595.html
Copyright © 2011-2022 走看看