<!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. .Net语言 APP开发平台——Smobiler学习日志：HoverBackColor属性的简单介绍

    一.属性介绍 设置按钮按下时的背景色,默认设置为“Gray” 二.举例介绍 以Button控件为例 mobiler窗体设计界面见图1 将该属性设置为“255, 255, 128”,表示RGB颜色,属性 ...

  2. DSAPI 获取实时统计信息CPU/内存/硬盘/网络

    有时,我们需要获取当前计算机中CPU.内存.硬盘.网络等实时信息,如下图:\ 要实现上述几项信息的获取,通常需要使用Timer控件来间隔获取,以便刷新最新的数据. 本示例中,放一个Timer控件,放一 ...

  3. win10连接无线网，开启移动热点，手机连接它手机一直显示获取ip地址中。

    *必须要有无线网卡才能设置WIFI首先打开电脑,选中“计算机”或者“我的电脑”,右击进入“管理”选项“.打开“计算机管理”窗口之后,在左栏菜单选项中找到“服务和应用程序”下的“服务”选项,如图点击进入 ...

  4. 驰骋工作流引擎JFlow与activiti的对比之2种取消模式

    1. 取消模式(Cancel Activity) 就是将某个活动取消. JFLOW中,类似与删除流程操作相同. 不能删除:不允许删除. 逻辑删除:仅仅将此流程标记为删除状态,数据仍然存在节点表单与流程 ...

  5. iOS----------计算一段代码执行时间

    CFAbsoluteTime start = CFAbsoluteTimeGetCurrent(); //在这写入要计算时间的代码 // do something CFAbsoluteTime end ...

  6. MIUI10系统怎么样刷成开发版获得ROOT权限

    小米的设备不同手机型号正常情况下小米官方论坛都提供两个不同系统,可分为稳定版和开发版,稳定版没有提供root超级权限管理,开发版中就提供了root超级权限,在很多工作的时候我们需要使用的一些功能强大的 ...

  7. postman测试方法，出现400错误码

    下午毛概课上帮同学debug了个错误: postman测试 ,得到返回 400的状态码错误: 查询博客: https://blog.csdn.net/zhangmengleiblog/article/ ...

  8. 初使用maven遇到各种问题记录

    Cannot change version of project facet Dynamic Web Module to 2.5? 解决办法:将web.xml配置文件中的<web-app ver ...

  9. Docker创建JIRA 7.2.4中文破解版

    目录 目录 1.介绍 1.1.什么是JIRA? 2.JIRA的官网在哪里? 3.如何下载安装? 4.对JIRA进行配置 4.1.打开浏览器:http://localhost:20012 4.2.JIR ...

  10. 微信小程序转发微信小程序转发

    微信小程序转发涉及以下4个方法: 1.Page.onShareAppMessage({}) 设置右上角“转发”配置,及转发后回调函数返回 shareTicket 票据 2.wx.showSahreMe ...