<!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. Java开发笔记（二）Java工程的帝国区划

    上一篇文章介绍了如何运行了第一个Java程序“Hello World”.然而这个开发环境看起来那么陌生,一个个名字符号完全不知道它们是干啥的呀,对于初学者来说,好比天书一般,多看几眼感觉都要走火入魔了 ...

  2. angularjs+webapi2 跨域Basic 认证授权（二）

    在上一篇中大概演示了 整个认证授权的过程.今天在这篇博客中将结合上一篇的例子继续在跨域的情况 我们用ionic 写一个简单的页面 值得注意的是 在ionic.bundle.js 里面集成了angula ...

  3. 利用自定义View实现扫雷游戏

    游戏规则: 简单版的扫雷事实上就是一个9×9的矩阵,其中有十个点是雷,非雷方块的数字代表该方块周围八个方块中雷的个数.通过长按某一方块(方块会变红)认定该方块为玩家认为的雷,通过短按某一方块来“展开” ...

  4. AndroidTV端的requestFocus()问题

    每次开机盒子或者电视的时候,发现给某些控件设置请求焦点 requestFocus 会失效 最终的解决办法就是延时请求 view.postDelayed(new Runnable() { @Overri ...

  5. Axure RP 8 注册码

    升级了8.1.0.3377版本后,需要使用下面这组注册码 许可:zdfans.com 重点:gP5uuK2gH + iIVO3YFZwoKyxAdHpXRGNnZWN8Obntqv7 ++ FF3pA ...

  6. 导入JavaWeb 项目出现的问题

    前言: 环境: windown 10 JDK 1.8 Tomcat 7 eclipse 导入项目 下面错误是出现的问题 Multiple annotations found at this line: ...

  7. C#字符串转二进制、二进制转字符串

    最近公司要做一个操作日志的模块,如果将操作日志以字符串的形式存到后台数据库,非常浪费内存,不可取,特意写了字符串与二进制相互转换的函数. 1.字符串转二进制 private string String ...

  8. 【原】Java学习笔记002 - JAVA SE编码规范

    /* * 编码规范: * 1.所有的命名遵循"见名知意"的原则 * 2.所有的命名不允许使用汉字或拼音 * 3.Java的工程命名建议使用小写,比如:oa.crm.cms... * ...

  9. python3 str（字符串）

    __add__函数 (在后面追加字符串) s1 ='Hello' s2 = s1.__add__(' boy!') print(s2) #输出:Hello boy! __contains__(判断是否 ...

  10. SQLServer之创建DML AFTER UPDATE触发器

    DML AFTER UPDATE触发器创建原理 触发器触发时,系统自动在内存中创建deleted表或inserted表,inserted表临时保存了插入或更新后的记录行,deleted表临时保存了删除 ...