<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>手机拍照</title>

    <style>

        #showimg{

            width: 150px;

            height: 150px;

        }

        #file_input{

            opacity: 0;

            position: absolute;

            width: 100%;

            height: 100;

        }

        #box{

            position: relative;

            background: green;

        }

    </style>

</head>

<body>

    <div class="file-box" id="box">

        拍照上传

        <input type="file" accept="image/*" capture="camera" id="file_input" class="file-btn">

    </div>

    <img id="showimg">

</body>

</html>

<script>

    var showimg = document.getElementById("showimg");

    var imginput = document.getElementById("file_input");

    document.getElementById("box").onclick = function () {

        imginput.onchange = function () {

            var files = this.files;

            console.log(files)   //本地的临时路径
　　　　　　　　　　
               // var formdata = new FormData();

                //formdata.append('fileStream', files);
　　　　　　　　　//　formdata再传给后台
            var url = URL.createObjectURL(files[0]);

            showimg.src = url;

        }

    }

</script>

H5调用手机拍照并展示在前端页面的更多相关文章

  1. HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

    上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...

  2. H5 调用 手机设备的功能

    1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...

  3. Xamarin.Android 调用手机拍照功能

    最近开发Android遇到了调用本地拍照功能,于是在网上搜了一些方法,加上自己理解的注释,在这儿记录下来省的下次用时候找不到,同事也给正在寻找调用本地拍照功能的小伙伴一些帮助~ 实现思路:首先加载-- ...

  4. h5调用手机前后摄像头，拍照

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...

  5. h5调用手机相册摄像头以及文件夹

    在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...

  6. H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

    H5使用input标签调用系统默许相机,摄像,录音功能.使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input ...

  7. Android初级教程调用手机拍照与摄像功能

    这个小案例建议在手机上运行. package com.example.camera; import java.io.File; import android.net.Uri; import andro ...

  8. h5调用手机照相机

    camera.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  9. H5 调用手机摄像机、相册功能

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

随机推荐

  1. React Fiber源码分析 （介绍）

    写了分析源码的文章后, 总觉得缺少了什么, 在这里补一个整体的总结,输出个人的理解~ 文章的系列标题为Fiber源码分析, 那么什么是Fiber,官方给出的解释是: React Fiber是对核心算法 ...

  2. web类协议脚本-飞机订票系统示例

    以下是LR自带的飞机订票系统的Demo,希望能帮助大家. Action() { int iRand; int iTmp; char *strTmpA; char *strTmpB; char *str ...

  3. [Go] golang的竞争状态

    1.goroutine在逻辑处理器的线程上进行交换 2.竞争状态:两个或者多个goroutine在没有互相同步的情况下,访问某个共享的资源,并试图同时读和写这个资源,就处于互相竞争的状态对共享资源的读 ...

  4. Mysql启动时执行文件init-file的使用

    可以在配置文件里指定mysql启动以后初始执行的SQL文件, 其语法是: 在[mysqld]下指定: init-file="D:/mysql/test.sql",  后面为具体的s ...

  5. 设计模式之Factory模式 代码初见

    ObjectFactory就是通过Factory建造一个Object,比如说DBConnectionFactory就是专门建造DBConnection的工厂 BuilderFactory就是通过Fac ...

  6. GNOME图形界面的基本操作

    成功登录进入CentOS系统之后,我们首先看到的桌面就是GNOME图形界面,下面来看一下相关的基本操作. 个性化设置 1,设置屏幕分辨率 进入菜单 2,更换桌面背景 进入下面菜单. 选择一张背景图片, ...

  7. （一）MYSQL ERROR 2003 (HY000): Can't connect to MySQL server on '192.168.10.210' (111) 解决方法

    今天在测试MySQL的连接时候,发现连接不通过,并报错ERROR 2003 (HY000): Can't connect to mysql server on '192.168.10.210' (11 ...

  8. CentOS 7安装指南

    CentOS 7安装指南(U盘版) 一.准备阶段 1.下载CentOS7镜像文件(ISO文件)到自己电脑,官网下载路径: http://isoredirect.centos.org/centos/7/ ...

  9. MySQL 基础知识梳理学习（一）----系统数据库

    information_schema 此数据库是MySQL数据库自带的,主要存储数据库的元数据,保存了关于MySQL服务器维护的所有其他数据库的信息,如数据库名.数据库表.表列的数据类型及访问权限等. ...

  10. 最小生成树（Prim算法）

    Java实现Prim算法 package com.java; import java.util.*; /** * 普里姆算法—Prim算法 * 算法思路:将图中所有的顶点分为两类:树顶点(已被选入生成 ...