ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览
1.返回顶部
1、
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
  6.     <title></title>
  7. </head>
  8. <body>
  9.     <input id="fileBtn" type="file" onchange="upload('#fileBtn', '#img');" accept="image/*" capture="camera" /><br />
  10.    <div>
  11.        <img src="" id="img"  height="200"/>
  12.    </div>
  13.     <!--
  14.     # 解析
  15.     # accept 属性（允许上传两种文件类型：gif 和 jpeg）
  16.     # capture 捕获到系统默认的设备，有三个参数值可设置  camera--照相机； camcorder--摄像机； microphone--录音
  17.     # js代码我做了封装, 参数一表示 "选择文件" 的 id，参数二表示 "显示图片" 的 id，
  18.     # 若是 ios 只能调用摄像头，不能选择打开相册的话，就把这个【capture="camera"】去掉，直接加一个属性 multiple
  19.     -->
  20.  
  21.     <script>
  22.         var upload = function (c, d) {
  23.             "use strict";
  24.             var $c = document.querySelector(c),
  25.                 $d = document.querySelector(d),
  26.                 file = $c.files[0],
  27.                 reader = new FileReader();
  28.             reader.readAsDataURL(file);
  29.             reader.onload = function (e) {
  30.                 $d.setAttribute("src", e.target.result);
  31.             };
  32.         };
  33.         //# 解析
  34.         //# 参数在上面 HTML 就已经讲解了，
  35.         //# file 表示你选中的那个图片，然后它里面有几个属性 name、size、type、slice等，也都非常实用，
  36.  
  37.         //# FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
  38.         //# 调用 FileReader 的 readAsDataURL 接口，将启动异步加载文件内容，通过给 reader 监听一个 onload 事件，
  39.         //# 将数据加载完毕后，在onload事件处理中，通过 event 的 result 属性即可获得文件内容，然后扔进 img 的 src 即可 打开图片并预览。
  40.     </script>
  41. </body>
  42. </html>
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、参考
2、
 
6.
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

HTML5: 实现调用系统拍照或者选择照片并预览的更多相关文章

  1. h5 实现调用系统拍照或者选择照片并预览

    这次又来分享个好东西! 调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的, 每当看到这块功能的 ...

  2. Android上传图片之调用系统拍照和从相冊选择图片

    Android上传图片之调用系统拍照和从相冊选择图片 本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015 ...

  3. Java乔晓松-android中调用系统拍照功能并显示拍照的图片

    android中调用系统拍照功能并显示拍照的图片 如果你是拍照完,利用onActivityResult获取data数据,把data数据转换成Bitmap数据,这样获取到的图片,是拍照的照片的缩略图 代 ...

  4. Android 实例解说加入本地图片和调用系统拍照图片

    在项目的开发过程我们离不开图片.而有时候须要调用本地的图片,有时候须要调用拍照图片.同一时候实现拍照的方法有两种,一种是调用系统拍照功能.还有一种是自己定义拍照功能. 而本博文眼下仅仅解说第一种方法, ...

  5. 摄像头(3)调用系统拍照activity来拍照

    import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...

  6. 摄像头(2)调用系统拍照activity来录像

    import android.app.Activity; import android.content.Intent; import android.content.pm.PackageManager ...

  7. Android调用系统拍照裁剪和选图功能

    最近项目中用到修改用户头像的功能,基本上都是模板代码,现在简单记录一下. 调用系统拍照 private fun openCamera() { //调用相机拍照 // 创建File对象,用于存储拍照后的 ...

  8. android高仿微信拍照、多选、预览、删除(去除相片)相冊功能

    先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...

  9. UWP 调用系统拍照程序

    当需要用户选择照片时,一般有两种方法: 1.从本地磁盘选择 2.调用照相机拍照 这次就说一下第二种方法,毕竟第一种大家都会. 先看下效果 如图所示,点击拍照后,会弹出系统照相机界面,在手机上,会打开相 ...

随机推荐

  1. python_django_template模块

    官方文档 博文导航: 定义模板:   变量 标签: if for include url csrf_token 过滤器: 简单过滤器 HTML转义 加减乘除的过滤器 注释: 模板继承 模板语言:Dja ...

  2. mysqld_safe A mysqld process already exists

    最近修改mysql密码遇到mysqld_safe A mysqld process already exists问题: 解决步骤: 1:ps aux |grep mysql   查看mysql的进程. ...

  3. [转]C# 动态调用 WebService

    通常我们在程序中需要调用WebService时,都是通过“添加Web引用”,让VS.NET环境来为我们生成服务代理,然后调用对应的Web服务.这样是使工作简单了,但是却和提供Web服务的URL.方法名 ...

  4. leetcood学习笔记-111-二叉树的最小深度

    题目描述: 第一次提交: class Solution(object): def minDepth(self, root): """ :type root: TreeNo ...

  5. delphi windows操作

    输入 procedure TypeKeyString(s: string); var c: Char; i: integer; off: integer; vkw: Word; begin to Le ...

  6. LeetCode 852. Peak Index in a Mountain Array (山脉数组的峰顶索引)

    题目标签:Binary Search 题目给了我们一组 int array,让我们找到数组的 peak. 利用 binary search, 如果数字比它后面那个数字小,说明还在上坡,缩小范围到右半边 ...

  7. JVM内核-原理、诊断与优化学习笔记（六）：类装载器

    文章目录 class装载验证流程 class装载验证流程 class装载验证流程 -加载 class装载验证流程 -链接 验证 链接 -> 验证 文件格式的验证 元数据验证(class文件简单语 ...

  8. 过滤'and','or' ''' '*' '=' ‘select’下的注入

    遇到一个站:http://www.马赛克.net/intro.aspx?id=6 加了单引号  http://www.马赛克.net/intro.aspx?id=6‘  页面无变化 加了双引号   h ...

  9. 基于airtest的朋友圈自动点赞

    本脚本可以通过AirtestIDE和python执行,推荐使用AirtestIDE的环境执行,更稳定一些 AirtestIDE官方文档 使用python执行该脚本 安装库 airtest.pocoui ...

  10. Spring源码分析（一）：从哪里开始看spring源码（系列文章基于Spring5.0）

    概述 对于大多数第一次看spring源码的人来说,都会感觉不知从哪开始看起,因为spring项目源码由多个子项目组成,如spring-beans,spring-context,spring-core, ...