HTML5: 实现调用系统拍照或者选择照片并预览
| ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览 |
| 1.返回顶部 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title></title>
</head>
<body>
<input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera" /><br />
<div>
<img src="" id="img" height="200"/>
</div>
<!--
# 解析
# accept 属性（允许上传两种文件类型：gif 和 jpeg）
# capture 捕获到系统默认的设备，有三个参数值可设置 camera--照相机； camcorder--摄像机； microphone--录音
# js代码我做了封装, 参数一表示 "选择文件" 的 id，参数二表示 "显示图片" 的 id，
# 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple
--> <script>
var upload = function (c, d) {
"use strict";
var $c = document.querySelector(c),
$d = document.querySelector(d),
file = $c.files[0],
reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
$d.setAttribute("src", e.target.result);
};
};
//# 解析
//# 参数在上面 HTML 就已经讲解了，
//# file 表示你选中的那个图片，然后它里面有几个属性 name、size、type、slice等，也都非常实用， //# FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
//# 调用 FileReader 的 readAsDataURL 接口，将启动异步加载文件内容，通过给 reader 监听一个 onload 事件，
//# 将数据加载完毕后，在onload事件处理中，通过 event 的 result 属性即可获得文件内容，然后扔进 img 的 src 即可 打开图片并预览。
</script>
</body>
</html>
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6. |
 |
作者：ylbtech 出处：http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。 |
HTML5: 实现调用系统拍照或者选择照片并预览的更多相关文章
- h5 实现调用系统拍照或者选择照片并预览
这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的 ...
- Android上传图片之调用系统拍照和从相冊选择图片
Android上传图片之调用系统拍照和从相冊选择图片 本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015 ...
- Java乔晓松-android中调用系统拍照功能并显示拍照的图片
android中调用系统拍照功能并显示拍照的图片 如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图 代 ...
- Android 实例解说加入本地图片和调用系统拍照图片
在项目的开发过程我们离不开图片.而有时候须要调用本地的图片,有时候须要调用拍照图片.同一时候实现拍照的方法有两种,一种是调用系统拍照功能.还有一种是自己定义拍照功能. 而本博文眼下仅仅解说第一种方法, ...
- 摄像头(3)调用系统拍照activity来拍照
import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...
- 摄像头(2)调用系统拍照activity来录像
import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...
- Android调用系统拍照裁剪和选图功能
最近项目中用到修改用户头像的功能,基本上都是模板代码,现在简单记录一下. 调用系统拍照 private fun openCamera() { //调用相机拍照 // 创建File对象,用于存储拍照后的 ...
- android高仿微信拍照、多选、预览、删除(去除相片)相冊功能
先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...
- UWP 调用系统拍照程序
当需要用户选择照片时,一般有两种方法: 1.从本地磁盘选择 2.调用照相机拍照 这次就说一下第二种方法,毕竟第一种大家都会. 先看下效果 如图所示,点击拍照后,会弹出系统照相机界面,在手机上,会打开相 ...
随机推荐
- python_django_在views模块中操作状态保持（session）
什么叫状态保持? 就比如说我们登陆一个网站,登陆之后的当前页面显示的是登陆状态,但是我们要再跳转同一网站的其他页面,则显示的未登录状态,状态保持就是:我们在当前页面登陆后,再访问其他页面时也显示为登陆 ...
- sublime Text3安装及配置与解决安装插件失败
1.下载sublime Text3的官网:https://www.sublimetext.com/32.安装Package Control 下载Package Contoral地址: 链接:htt ...
- delphi Treeview用法
Treeview用于显示按照树形结构进行组织的数据. Treeview控件中一个树形图由节点(TreeNode)和连接线组成.TtreeNode是TTreeview的基本组成单元. ...
- NOIp2018集训test-9-2(pm)
其实这套题我爆0了,T1define 写成ddefine编译错误 T2有两个变量爆int 但是我看zwh不在悄悄地改了,我心里还是十分愧疚(没有)的.主要是林巨已经虐我125了要是再虐我200分我大概 ...
- 暑假集训test-8-31(am)
1.字符串匹配 看到题目以为真是字符串题结果是数学题..70分做法很傻逼然而我更傻逼只有30... 正解是发现两个位置会匹配当且仅当mod gcd(lena,lenb)同余,在一个lcm(lena,l ...
- NX二次开发-创建CSYS坐标系UF_CSYS_create_csys
NX9+VS2012 #include <uf.h> #include <uf_csys.h> #include <uf_mtx.h> UF_initialize( ...
- python入门 元组tuple (三)
什么if while语句了 列表字典都太简单了 ,我直接跳过了, 开始写tuple了 增 元组格式是写在括号里,注意与列表(写在中括号里)的区别 tup1 = ('math', 'beijing', ...
- IDea 工具debug模式详细使用说明
IDea 工具debug模式详细使用说明 IDEA中如何使用debug调试项目 一步一步详细教程 Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生 ...
- 20130330 printf数组改变 数组指针便利二维数组 二级指针遍历二维数组 ZigZag
1.为什么printf之后数组的值会改变? #include<stdio.h> ; int * Zigzag() { ,j=,limit=; ; ; int a[N][N]; int (* ...
- pytong下安装安装SK-Learn
安装SK-Learn需要依赖的Python安装包有: Python (>= 2.6), NumPy (>= 1.3), SciPy (>= 0.7), 下载python的各种包的地址 ...