<!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 Core项目实战-统一认证平台】第十四章 授权篇-自定义授权方式

    [.NET Core项目实战-统一认证平台]开篇及目录索引 上篇文章我介绍了如何强制令牌过期的实现,相信大家对IdentityServer4的验证流程有了更深的了解,本篇我将介绍如何使用自定义的授权方 ...

  2. 第一册：lesson 105.

    原文: Full of mistakes. Where's Sandra,Bob? I want her. Do you want to speak to her? Yes I do. I want ...

  3. MySQL 笔记整理（5） --深入浅出索引（下）

    笔记记录自林晓斌(丁奇)老师的<MySQL实战45讲> 5) --深入浅出索引(下) 这次的笔记从一个简单的查询开始: 建表语句是这样的 mysql> create table T ...

  4. 为什么选择 Visual Studio Code

    为什么选择 Visual Studio Code 你在 VS Code 中找到的每个功能都完成一项出色的工作,构建了一些简单的功能集,包括语法高亮.智能补全.集成 git 和编辑器内置调试工具等,将使 ...

  5. 【Nginx】使用nginx反向代理IIS实现80端口的解放

    下载版本: 官网地址:http://nginx.org/en/download.html 我使用了稳定版本. 下载完成之后进行目录解压,解压之后大概就是这个样子: 网上很多人写这些了想了解概念的百度一 ...

  6. python之字符串反转

    def main(): a = "abcdefg" a = a[::-1] print(a) if __name__ == '__main__': main()

  7. Java设计模式之【工厂模式】（简单工厂模式，工厂方法模式，抽象工厂模式）

    Java设计模式之[工厂模式](简单工厂模式,工厂方法模式,抽象工厂模式) 工厂模式出现的原因 在java中,创建一个对象最简单的方法就是使用new关键字.但在一些复杂的业务逻辑中,创建一个对象不只需 ...

  8. 仿9GAG制作过程（二）

    有话要说: 这次准备讲述用python爬虫以及将爬来的数据存到MySQL数据库的过程,爬的是煎蛋网的无聊图. 成果: 准备: 下载了python3.7并配置好了环境变量 下载了PyCharm作为开发p ...

  9. java基础知识总结二

    1. synchronized和reentrantlock异同 相同点 都实现了多线程同步和内存可见性语义 都是可重入锁 不同点 实现机制不同 synchronized通过java对象头锁标记和Mon ...

  10. MySQL MHA FailOver后，原Master节点自动以Slave角色加入解群的研究与实现

    MHA是一套MySQL高可用管理软件,除了检测Master宕机后,提升候选Slave为New Master之外(漂虚拟IP),还会自动让其他Slave与New Master 建立复制关系.MHA Ma ...