ylbtech-HTML5: 实现调用系统拍照或者选择照片并预览
1.返回顶部
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、
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. selenium IDE的安装及录制回放的简单使用

    1.Selenium IDE下载地址为http://docs.seleniumhq.org/download/(需要翻墙) 2.直接单机“Download version”后面的版本号即可开始下载 3 ...

  2. GitHub排名TOP30的机器学习开源项目

    对于机器学习者来说,阅读开源代码并基于代码构建自己的项目,是一个非常有效的学习方法.看看以下这些Github上平均star为3558的开源项目,你错了哪些? 1. FastText:快速文本表示和文本 ...

  3. 解决 java.lang.UnsupportedClassVersionError小记

    解决 java.lang.UnsupportedClassVersionError 错误原因是:编译的 class 文件的 jdk版本和运行这个 class 文件的jdk 版本不一致 比如:服务器运行 ...

  4. springBoot项目mybatis中加入缓存

    1:maven: <!-- https://mvnrepository.com/artifact/net.sf.ehcache/ehcache-core --> <dependenc ...

  5. Linux如何删除特殊字符文件名或目录？

    通过文件的inode号删除文件 先用ls -i 找出要删除文件的inode 号 2ls -i |grep xxxxxx|awk '{print $2}'|xargs -i rm -f {} xxxxx ...

  6. C语言itoa()函数和atoi()函数详解(整数转字符C实现)【转载】

    文章转载自https://www.cnblogs.com/bluestorm/p/3168719.html   C语言提供了几个标准库函数,可以将任意类型(整型.长整型.浮点型等)的数字转换为字符串. ...

  7. Cstring转char、string、int等数据类型的方法(转载)

    Cstring转char.string.int等数据类型的方法 (-- ::) 转载 标签: 杂谈 分类: VC CString 转char * CString cstr; char *p = (LP ...

  8. D语言简介

    D语言,一种通用计算机程序语言,威力强大.功能丰富,支持多种编程范式,例如面向对象.[1]  D语言最初由Digital Mars公司就职的Walter Bright于2001年发布,意图改进C++语 ...

  9. SpringBoot通过maven打包成jar，设定主清单属性。

    文章目录 原来普通的jar包一直是 <build> <plugins> <plugin> <groupId>org.apache.maven.plugi ...

  10. JMeter安装和环境变量搭建

    下载安装Java JDK环境,设置环境变量 elasticsearch for windows:https://www.cnblogs.com/Neeo/articles/10368280.html ...