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

这次又来分享个好东西!

调用手机相机拍照或者是调用手机相册选择照片,这个功能在 手机端页面 或者 webApp 应该是常用到的,就拿个人或会员资料录入那块来说就已经是经常会碰到的,

每当看到这块功能的时候,前端的小伙伴就得去找各种各样的插件。除非你收藏了什么好东西,或者是你收藏了什么比较旧的、需求跟不上的好东西,需求不一样体验不好 那你提交了,产品经理会买你账吗?

好了,咱入正题!

这里主要是针对手机端页面或者webApp的,pc端页面效果欠佳(有时候点击选择按钮,弹框要等你上完厕所才能弹得出来)

这里分两块代码,分别为 html 和 js

HTML

<input id="fileBtn" type="file" onchange="upload(‘#fileBtn‘, ‘#img‘);" accept="image/*" capture="camera"/>
<img src="" id="img"/>

# 解析
# accept 属性(允许上传两种文件类型:gif 和 jpeg)
# capture 捕获到系统默认的设备,有三个参数值可设置  camera--照相机; camcorder--摄像机; microphone--录音
# js代码我做了封装, 参数一表示 "选择文件" 的 id,参数二表示 "显示图片" 的 id,

js

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 即可 打开图片并预览。

这个对于前端来说是非常实用的,

不过点击选择文件这个按钮选择系统文件的时候弹出的操作菜单,是依赖你所使用的浏览器的,建议还是用 微信 来测试(最佳),而如果你刚好要弄微信端的页面,

原文地址:http://www.cnblogs.com/wuxiexy/p/6738928.html

时间: 2024-10-06 10:58:39

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

调用系统拍照和在系统图库选择照片设置头像

先上代码: package com.create.intenttest; import android.content.Intent; import android.content.SharedPreferences; import android.graphics.Bitmap; import android.net.Uri; import android.os.Bundle; import android.os.Environment; import android.provider.Med

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

Android上传图片之调用系统拍照和从相册选择图片 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015年12月17日下午发了第一篇博文,现在是2016年4月6日.时间间隔长的过分啊,我自己都看不下去了.原因呢?当然是自己的原因,其实是有很多时间来些博客的,但是这些时间都花在DOTA上了(还是太年轻啊).请原谅我的过错--. 一.概述: 现在几乎应用都会用到上传图片的功能,而要上传图片,首先得选择图片,本文不针对如何上传图片到服务器(每个项目与服务器交互的方式不同,因

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

Android上传图片之调用系统拍照和从相冊选择图片 本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 前言: 万丈高楼平底起,万事起于微末.不知不觉距离上篇博文已近四个月,2015年12月17日下午发了第一篇博文.如今是2016年4月6日.时间间隔长的过分啊,我自己都看不下去了. 原因呢?当然是自己的原因.事实上是有非常多时间来些博客的,可是这些时间都花在DOTA上了(还是太年轻啊).请原谅我的过错--. 一.概述: 如今差点儿应用都会用到上传图片的功能,而要上传图片,首先得

Android 实例讲解添加本地图片和调用系统拍照图片

在项目的开发过程我们离不开图片,而有时候需要调用本地的图片,有时候需要调用拍照图片.同时实现拍照的方法有两种,一种是调用系统拍照功能,另一种是自定义拍照功能.而本博文目前只讲解第一种方法,第二种方法后期在加以讲解. 添加本地图片和调用系统拍照图片主要是通过调用acitivity跳转startActivityForResult(Intent intent, int requestCode)方法和activity返回结果onActivityResult(int requestCode, int re

android调用系统拍照那些事

小时候都知道每天写日记是个好习惯,慢慢发现自己忘记了这些习惯,好久没有给这干枯的博客添加一点新意了,这回也冒出个小芽来刷新一下博客. 今天写的一点也不复杂,就是回顾一些老的知识而已,也算是记一个笔记,好了闲话不多说了,开始今天的主题吧. 关于拍照,这里不是自己实现拍照,是调用系统拍照,很简单的,可是有些时候我也遇到一个问题,就是我没有主动压缩,系统却自动帮我压缩了,可是我需要这些高清的图片,解决方式网上也有说,但是我做的是自己的笔记,所以也不在乎赘余,最起码我是经过验证后,才写我笔记的. 下面是

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

先声明授人与鱼不如授人与渔,只能提供一个思路,当然需要源码的同学可以私下有偿问我要源码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相册和拍照,这回来个高仿微信的拍照.多选.预览.删除(去除相片)相册功能,之前开发的所有应用都带有这需求,但是一直都不实用!废话就不多说了,先来捋一下思路: 1.拍照能实时保存到本地并实时查询(不必用广播或者服务) 2.拍照保存到到自定义路径并根据不同文件夹显示文件夹下的相片 3.多选规定张数图片 4.用到的集合有: (1).所有相

Ionic系列——调用摄像头拍照和选择图库照片功能的实现

1.需求描述 最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传. 2.准备 ①.添加插件$cordovaCamera cordova plugin add cordova-plugin-camera ②.在controller中添加依赖 3.代码实现 $scope.takePhoto=function(){     var options = {                                                        

UWP 调用系统拍照程序

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

调用系统相机拍照,保存照片,调用系统裁剪API对照片处理,显示裁剪之后的照片

package com.pingyijinren.test; import android.annotation.TargetApi; import android.app.Notification; import android.app.NotificationManager; import android.app.PendingIntent; import android.content.ContentResolver; import android.content.Intent; impo