<!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. Autorelease机制讲解

    Autorelease机制是在iOS内存管理中的一员.在MRC中,是通过调用[obj autorelease]来延迟内存释放:在ARC中,我们已经完全不需要知道Autorelease就能很好地管理好内 ...

  2. Captcha服务（后续2）— 改造Captcha服务之Asp.Net Core项目中如何集成TypeScript

    环境准备 .Net Core 版本:下载安装.Net Core SDK,安装完成之后查看sdk版本 ,查看命令dotnet --version,我的版本是2.2.101 IDE: Visual Stu ...

  3. Predicate--入门简介

    说明:表示定义一组条件并确定指定对象是否符合这些条件的方法.此委托由 Array 和 List 类的几种方法使用,用于在集合中搜索元素. var predicate = new Predicate&l ...

  4. Spring（一）JdbcTemplate的环境搭建

    1.建立一个项目,导入jar包(ioc aop dao 连接池 数据库驱动包)拷贝Spring容器对应的配置文件到src下 2.在配置文件中引入外部属性文件 3.配置数据源 4.配置JdbcTempl ...

  5. Array的 filter() 和 sort()

    filter() filter() 方法创建一个创建一个新数组,新数组中的元素是通过筛选原数组中的元素所得到的.筛选的方式是把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保 ...

  6. vis.js 4.21.0 Timeline localization

    from:http://visjs.org/timeline_examples.html https://github.com/almende/vis https://github.com/momen ...

  7. BZOJ3122: [Sdoi2013]随机数生成器(BSGS)

    题意 题目链接 Sol 这题也比较休闲. 直接把\(X_{i+1} = (aX_i + b) \pmod P\)展开,推到最后会得到这么个玩意儿 \[ a^{i-1} (x_1 + \frac{b}{ ...

  8. SAP QA32 做使用决策系统报错：分类数据的不一致性=>交易终止

    SAP QA32 做使用决策系统报错:分类数据的不一致性=>交易终止 QA32,对如下检验批做处理,系统报错, 试图使用MSC3N去显示这个批次主数据,同样报错, 原因在于批次的分类数据产生后, ...

  9. java 线程方法 ---- join()

    class MyThread2 implements Runnable{ @Override public void run() { for (int i = 0; i < 5; i++){ S ...

  10. Docker+Redis镜像的原理以及部署安装（超详解附截图）

    文章来源:公众号-智能化IT系统. 一. DOCKER介绍 Docker简介 (1)Docker 是一个开源的应用容器引擎,基于 Go 语言,并遵从Apache2.0协议开源. (2)Docker 可 ...