H5调用手机拍照并展示在前端页面
<!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调用手机拍照并展示在前端页面的更多相关文章
- HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(二)
上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之 ...
- H5 调用 手机设备的功能
1.调用 邮件 : 参考 https://blog.csdn.net/github_38516987/article/details/77637546 (亲测有效) <a href=" ...
- Xamarin.Android 调用手机拍照功能
最近开发Android遇到了调用本地拍照功能,于是在网上搜了一些方法,加上自己理解的注释,在这儿记录下来省的下次用时候找不到,同事也给正在寻找调用本地拍照功能的小伙伴一些帮助~ 实现思路:首先加载-- ...
- h5调用手机前后摄像头,拍照
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="pacam.aspx.cs& ...
- h5调用手机相册摄像头以及文件夹
在之前一家公司的时候要做一个app里面有上传头像的功能,当时研究了好久,找到了一篇文章关于h5摄像头以及相册的调用的,所以就解决了这个问题了!!我这里记录一下以便后面有人需要,可以参考一下!!!! 下 ...
- H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明
H5使用input标签调用系统默许相机,摄像,录音功能.使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能: <input ...
- Android初级教程调用手机拍照与摄像功能
这个小案例建议在手机上运行. package com.example.camera; import java.io.File; import android.net.Uri; import andro ...
- h5调用手机照相机
camera.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- H5 调用手机摄像机、相册功能
<input type="file" accept="image/*" capture="camera"> <input ...
随机推荐
- 第50章 设备授权端点(Device Authorization Endpoint) - Identity Server 4 中文文档(v1.0.0)
设备授权端点可用于请求设备和用户代码.此端点用于启动设备流授权过程. 注意 终端会话端点的URL可通过发现端点获得. client_id 客户标识符(必填) client_secret 客户端密钥可以 ...
- Java开发笔记(六十)匿名内部类的优势
前面依次介绍了简单接口和扩展接口,给出的范例都是自定义的接口代码,其实Java系统本身就自带了若干行为接口,为了更好地理解系统接口的详细用法,接下来还是从一个基础的例子出发,抽丝剥茧地逐步说明接口的几 ...
- 程序员50题(JS版本)(二)
程序6:用*号输出字母C的图案 console.log(' ****'); console.log(' ***'); console.log(' **'); console.log(' *'); co ...
- vue 页面跳转的两种方式
1,标签跳转 <router-link to='two'><button>点我到第二个页面</button></router-link> 2,点 ...
- hbuilder vs2013api Access-Control-Allow-Origin
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" valu ...
- 使用代码检查Dynamics 365中的备用键状态
摘要: 微软动态CRM专家罗勇 ,回复304或者20190213可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 备用键(Al ...
- 《Pro Asp.net core mvc 2》bower问题
在阅读<Pro Asp.net core mvc 2>中有使用bower管理包,可能是由于vs2017或者bootstrap什么地方改变了,按照步骤进行操作,完全没有对应的样式出现.开始以 ...
- WebLogic使用总结
一. WebLogic安装 WebLogic使用总结(一)——WebLogic安装 一.下载WebLogic 到Oracle官网http://www.oracle.com/ 下载WebLogic(根据 ...
- 通过ADB查看当前Activity
cmd命令中输入:adb shell dumpsys activity activities 在一连串的输出中找到Runing activities com.android.settings是包名. ...
- 20181218-PostgreSQL数据库Extension管理
20181218-PostgreSQL数据库Extension管理 注意:在集群的一个数据库中安装扩展,在集群的另一个数据库要使用的话,仍需安装 1. 查看当前已安装Extension postgre ...