移动端js调取手机相册和拍照功能

前端可以通过js调取手机的相册和拍照功能,但不能拍视频!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="vie…

使用cordova，使html5也能像IOS，Android那样可以调取手机的相机拍照功能

一,我们在使用html5的技术开发手机app时,并不能像IOS,Android那样可以调取手机原生的相机功能,这是我们就要借助一些插件来时实现. 二,安装Cordoba的相机插件 1.在文件目录下,使用命令安装相机插件,命令如下: cordova plugin add cordova-plugin-camera 2.使用”camera.getPicture“函数来调取相机 camera.getPicture(successCallback, errorCallback, options) suc…

利用JS调取电脑摄像头，实现拍照功能

1.调取电脑摄像头非常简单,看代码一幕了然 window.addEventListener("DOMContentLoaded", function() { var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj =…

如何在app里利用js调取手机第三方地图--以高德地图和百度地图为例（2）

接着上篇文章说一下js调取第三方地图的问题,上次的方式是通过一个链接直接接到了第三方的web页面,又从第三方的web页面调用的第三方app;结果,这个方法被否定了,因为需求不是这样,需求直接就想调用第三方的app. 因为项目是基于mui框架写的,而MUI自身又封装了调用第三方app的方法.所以,在官方文档中的runtime的模块中写了如何调用. 先来简单介绍一下Runtime模块.Runtime模块管理运行环境,可用来获取当前运行环境的信息.与其他程序进行通讯等.一般用plus.runtime可…

HTML5 使用FileReader实现调用相册、拍照功能

HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简单,可以按照如下步骤创建FileReader对象并调用其方法: 1.检测浏览器对FileReader的支持 if(window.FileReader) { var fr = new FileReader(); // add your code here } else { alert("Not sup…

H5+JS实现手机摇一摇功能

在做微信活动页面的时候,经常会需要实现手机摇一摇功能,比如“摇一摇,拿好礼”. 为了实现它,就需要用到HTML5的DeviceOrientation特性.它提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientation事件提供了设备角度.朝向等信息). 而通过DeviceMotion对设备运动状态的判断,则可以帮助我们在网页上就实现“摇一摇”的交互效果. 现在把完整代码记录下: //运动事件监听 if (wi…

Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能

vue组件代码 <template> <div> <div style="padding:20px;"> <div class="show"> <div class="picture" :style="'backgroundImage:url('+headerImage+')'"></div> </div> <div style=&quo…

JS实现手机摇一摇功能

//运动事件监听 if (window.DeviceMotionEvent) { window.addEventListener('devicemotion',deviceMotionHandler,false); } //获取加速度信息 //通过监听上一步获取到的x, y, z 值在一定时间范围内的变化率,进行设备是否有进行晃动的判断. //而为了防止正常移动的误判,需要给该变化率设置一个合适的临界值. var SHAKE_THRESHOLD = 4000; var last_update =…

WebApp调用手机相册或摄像头、拨打电话

WebApp调用手机相册或摄像头.拨打电话一.总结一句话总结:input标签,指定type为file,选择好对应的accept即可.camera——相机,相应的accept为image : camcoder——摄像机,相应的accept为video:microphone——录音,相应的accept为audio: <input type="file" accept="image/*" capture="camera"> <in…

部分vivo和oppo手机，使用上传图片功能，可能会出现退出webview的现象(回退到app的入口页面)

在公司的app里面嵌入了一个h5页面,h5页面有个使用图片上传功能,上传图片出现闪退的现象问题描述:vivo手机,在app内的wap页面使用上传图片的功能,在选择好图片点击确认按钮后,出现退出整个webview,回退到app该wap页面的入口页面,且app自动刷新了该入口页面如果在相册内直接点击拍照,拍好后点击使用照片,就不会出现退出webview的现象,且在这之后点击上传图片,使用相册里面的图片上传也不会出现退出webview的现象原因:vivo.oppo等部分android手机低于某个…

使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍两个js库,都很牛掰,感谢大神,献上链接. 仓库:https://github.com/serratus/quaggaJS 官网: https://serratus.github.io/quaggaJS/ 识别二维码条形码解析: 我也是在网上找了一大堆,都失败了,别人博主写的都没头没尾的,无法实现…

js 调用手机摄像头或相册并展示图片

效果图手机浏览器.微信打开该网页,都支持调用摄像头拍照和打开相册. 先看最终结果: 每次点击“点击上传”,可以选择相册或者拍照,选完以后可以多展示一张图片,同时上传服务器. 点击“重新上传”,清空所有图片. PC浏览器打开,类似,不过只能选择图片文件: 代码把input type=file的标签透明度设置为0,使用绝对布局的方式用另一个标签覆盖它: <div id="imgPreview"> <div id="prompt3"> <…

mui H5+ 调取相册拍照功能上传图片 + 裁剪功能

H5+ 相册拍照图片上传点击用户头像后,弹出actionSheet,选择从相册或是拍照:选取照片后调用上传方法: 上传图片后调用PhotoClip.js 插件进行裁剪具体流程弹出actionSheet /*点击头像触发*/ document.getElementById('headImage').addEventListener('tap', function() { if (mui.os.plus) { var a = [{ title: "拍照" }, { title: &…

微信公众号与HTML 5混合模式揭秘2——分享手机相册中照片

本书是分享微信jssdk开发的第二篇. 4.2.1 项目需求需求说明:实现微信端的手机用户,点击按钮选取1张图片,分享到朋友圈. 4.2.2 需求分解通过对需求的了解,可以将其分解为: (1)微信端手机用户,可以使用微信的JSSDK. (2)选取图片,使用JSSDK的“chooseImage”,由于分享图片本地地址无法分享,因此还需要JSSDK的“uploadImage”. (3)分享到朋友圈,需要JSSDK的“onMenuShareTimeline”. (4)综合起来,业务逻辑请查…

Android调用系统相册和拍照的Demo

最近我在群里看到有好几个人在交流说现在网上的一些Android调用系统相册和拍照的demo都有bug,有问题,没有一个完整的.确实是,我记得一个月前,我一同学也遇到了这样的问题,在低版本的系统中没问题,用高于4.4版本的系统就崩溃.所以,我还是想提取出来,给大家整理一下,一个比较完整无bug的demo,让大家收藏,留着以后用. 其实对于调用手机图库,高版本的系统会崩溃,是因为获取方法变了,所以我们应该对此进行一个判断.方法如下: Intent intent; if (Build.VERSION.…

移动端js模拟截屏生成图片并下载功能的实现方案

一.根据PM需求如下: 移动端wap 实现将二维码生成图片下载至用户手机相册保存二.根据现有思路: 1.使用第三方工具html2canvas,将页面中指定范围的dom转换为canvas 2.随后使用canvas的apitoDataUrl获得base64格式的图片数据 3.此时试着直接用a标签下载 <a href="base64Url" download="name.jpg"></a> 三.经过尝试,发现在wap端无法完美实现,原因: 1.H…

PhoneGap奇怪的现象：File FileTransfer download, 手机相册检测不到下载下来的图片(解决)

我有个从服务器下载相片的功能在使用 File FileTransfer download api时,碰到了很奇怪的现象:图片已经从服务器里下载了,手机文件夹里也可以看到下载过来的图片,但是我的手机相册就是没有检测到它.当我把手机上sdcard/Android/data/com.android.gallery3d/cache文件夹删掉,再打开手机相册时,就检测到了.请问有没有人遇到同样的问题,怎么破,我不可能每次下载完成后都要去删掉那个文件夹吧????? 手机:中兴u759系统:Android 4…

js判断手机浏览器操作系统和微信浏览器的方法

做手机端的前端开发,少不了对手机平台的判断.如,对于app下载,就要判断在Android平台下就显示Android下载提示:在iOS平台下就显示iOS下载提示. 今天就为大家介绍一下用js判断手机客户端平台及系统平台的方法: <script type="text/javascript"> //手机端判断各个平台浏览器及操作系统平台 function checkPlatform(){ if(/android/i.test(navigator.userAgent)){ docu…

js获取手机型号和手机操作系统版本号

1.js 判断IOS版本号先来观察 iOS 的 User-Agent 串: iPhone 4.3.2 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5iPone 5.1 系统:Mozilla/5.0 (iPhone; U; CPU iPhone…

手淘的flexible.js解决手机适配问题

如何使用flexible.js做手机适配做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewport('视口'),就是这段代码<meta name="viewport" content="width=device-width,initial-scale=1.0">,因为flexible是通过js动态改变meta标签,类似代码如下: var metaE…

小程序canvas生成海报保存至手机相册

小程序canvas画图保存至手机相册 (1)可直接展示生成的海报 .因手机分辨率不同可能导致生成的海报会有细微差别,这里隐藏canvas海报,页面正常设置海报样式保存时保存隐藏的canvas海报 (2)tip: canvas 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级.(在手机上canvas在最上层无法隐藏)解决方法: canvas外加一框view 设置样式:style="width:0;height:0;overflow: hidden;opacity:…

利用 AFN 上传相册或拍照图片

概述自定义上传图片请求,自定义调取相册及拍照,方便多处使用时调用. 详细代码下载:http://www.demodashi.com/demo/10718.html 由于项目中多处需要上传图片,我们可以自定义上传图片请求,自定义调取相册及拍照,方便多处使用时调用. 一.主要思路 1. 自定义ZLImagePicker, 从相册选择图片或者拍照上传图片页面 2. 请求上传你选取的相册图片或者拍照图片(经过压缩处理) 3. 获取到第一步图片url上传给服务器 4. 回显图片(当然进入该界面时先判断…

手机相册管理(gallery) ---- HTML5+

模块:gallery Gallery模块管理系统相册,支持从相册中选择图片或视频文件.保存图片或视频文件到相册等功能.通过plus.gallery获取相册管理对象. 管理我们手机上用到的相册:选择图片,和保存图片: 应用场景:朋友圈发照片,QQ空间发视频,添加图片附件,添加视频附件: 这个不需要初始化(new): 它有两个核心的方法:pick() 选取,save():保存: void plus.gallery.pick(successCB,errorCB,option); void plus.g…

HTML5+Canvas+jQuery调用手机拍照功能实现图片上传（二）

上一篇仅仅讲到前台操作,这篇专门涉及到Java后台处理.前台通过Ajax提交将Base64编码过的图片数据信息传到Java后台,然后Java这边进行接收处理.通过对图片数据信息进行Base64解码,之后使用流将图片数据信息上传至server进行保存,而且将图片的路径地址存进数据库. 大家能够点此链接查看前台本地压缩上传的处理: HTML5+Canvas+jQuery调用手机拍照功能实现图片上传(一) ok,废话不多说了.直接贴代码吧. 1.前台js代码: $.ajax({ async:false…

web调用手机相册，并实现动态增加图片功能

注:经测试h5调用相册效果有兼容性问题,安卓仅能调用拍照功能(部分安卓可能会调不起来,所以建议用app原生调用),ios可调起拍照和相册功能. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无…

微信小程序例子-保存图片到手机相册

微信小程序例子-保存图片到手机相册 1.关键代码 1)WXML文件 2)JS文件 saveImgToPhotosAlbumTap: function(){ // 图片必须是 https 的 var IMG_URL = 'https://img13.360buyimg.com/n5/jfs/t15574/103/2503735642/354259/239cea20/5aaf4e5cN7ed2aacd.jpg'; wx.downloadFile({ url: IMG_URL, success: fu…

C#/.net 通过js调用系统相机进行拍照，图片无损压缩后进行二维码识别

这两天撸了一个需求,通过 JS 调用手机后置相机,进行拍照扫码.前台实现调用手机相机,然后截取图片并上传到后台的功能.后台接收传过来的图片后,通过调用开源二维码识别库 ZXing 进行二维码数据解析.刚开始在电脑上截图,上传到后台进行识别,测试了几个没有问题.但是发布外网后,一直解析失败.我把手机拍的照片,放到电脑上也是识别不了.后来通过对比图片,发现手机拍的照片有15M大.怀疑是图片过大导致解析二维码失败,才想着把图片无损压缩后再进行二维码识别,压缩后果然见效. 1.图片无损压缩方法 ///…

MUI使用H5+Api调取系统相册多图选择及转base64码

伟大的哲学家曾说过"写代码,一定要翻文档" 这次我们需要用到的是调取系统相册进行多图上传,先奉上html5+api关于系统相册的文档链接链接:HTML5+ API Reference & gallery 首先一点,我们在使用5+Api前都需要在manifest.json文件中进行功能模块的添加,当然用Hbuilder的话大部分模块都已在内,这里是关于相册的模块 { // ... "permissions":{ // ... "Gallery&quo…

js倒计时手机休眠时时间不进行减少

http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp12345 来源:转载 js倒计时我们做过很多了但在使用过程中会有时差问题,特别是在手机中会发现js倒计时时间有问题了,下面来看如何处理这些问题. 在手机版网页中做倒计时(使用服务端时间来倒计时)我们需要考虑到两个问题:1.避免频繁的取服务端时间,2.手机处于锁屏状态或者浏览器/页面在后台运行对倒计时的处…

🤔 移动端 JS 引擎哪家强？美国硅谷找......

如果你喜欢我写的文章,可以把我的公众号设为星标 ,这样每次有更新就可以及时推送给你啦在一般的移动端开发场景中,每次更新应用功能都是通过 Native 语言开发并通过应用市场版本分发来实现的.但是市场瞬息万变,Native 语言在开发效率上存在一定不足,并且从 APP 版本更新到应用市场审核发布再到用户下载更新,总会存在一定的时间差,这样就导致新的功能无法及时覆盖全量用户. 为了解决这个问题,开发者们一般会在项目里引入一门脚本语言,提速 APP 的研发流程.在移动端应用比较广泛的脚本语言…

【移动端js调取手机相册和拍照功能】的更多相关文章