原生js调用手机拍照功能

    此功能主要用于混合App开发时手机拍照上传图片的功能！

话不多说直接上代码！
注：此代码在浏览器中运行时会报错，必须打开调试功能在手机上运行才可以！

// html部分
//主要就是给他一个点击事件，来触发上传的事件
<img class="head-img mui-action-preview" id="head-img1" src="" onclick="sahngchang()" style="width: 100px;height: 100px;background: red;"/>//javascript部分
//          document.querySelector('#head-img1').addEventListener('tap', function() {function sahngchang(){console.log(2222)var buttonTit = [{title: "拍照"}, {title: "从手机相册选择"}];plus.nativeUI.actionSheet({title: "上传图片",cancel: "取消",buttons: buttonTit}, function(b) { /*actionSheet 按钮点击事件*/switch(b.index) {case 0:break;case 1:getImage(); /*拍照*/break;case 2:galleryImg(); /*打开相册*/break;default:break;}})}//拍照function getImage() {var cmr = plus.camera.getCamera(1); //获取后面的摄像头cmr.captureImage(function(p) {//拍照成功，返回路径 p，但是不是绝对路径//通过p，读取图片文件var wt = plus.nativeUI.showWaiting();plus.io.resolveLocalFileSystemURL(p, function(entry) {//entry为获取的文件，.file()方法可以获取该文件的文件名、大小等信息，返回包含文件信息的对象entry.file(function(file) {// alert("getFile:" + JSON.stringify(file));var fileReader = new plus.io.FileReader(); //开启读取文件fileReader.readAsDataURL(file, 'utf-8'); //将文件数据对象信息file进行url base64编码fileReader.onloadend = function(evt) {//压缩图片wt.close();$('#head-img1').attr('src', evt.target.result)alert(evt.target.result)$.ajax({url: "/api/papers/upload",type: "post",dataType: 'json',data: {file: evt.target.result},success: function(data) {var dataS = JSON.stringify(data);if(data.code == 1) {$('#head-img1').attr('src', data.src)wt.close(); //关闭等待提示按钮} else {alert(data.msg)}}});}})}, function(e) {alert(e.message);});}, function(e) {}, {filename: "_doc/camera/"}); //拍照}//从相册选择function galleryImg() {plus.gallery.pick(function(p) {var wt = plus.nativeUI.showWaiting();plus.io.resolveLocalFileSystemURL(p, function(entry) {entry.file(function(file) {var fileReader = new plus.io.FileReader(); //开启读取文件fileReader.readAsDataURL(file, 'utf-8');fileReader.onloadend = function(evt) {$('#head-img1').attr('src', evt.target.result)$.ajax({url: "www.baidu.com",//根据具体提供的接口type: "post",dataType: 'json',data: {file: evt.target.result},success: function(data) {var dataS = JSON.stringify(data);if(data.code == 1) {$('#head-img1').attr('src', data.src)wt.close(); //关闭等待提示按钮} else {alert(data.msg)}}});}})})});}

原生js调用手机拍照功能相关推荐

html实现照片添加功能,HTML5 Canvas调用手机拍照功能实现图片上传功能（图文详解上篇）...
这篇文章主要为大家详细介绍了HTML5 Canvas,和jquery技术,调用手机拍照功能实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下因为最近一段时间,一直在弄微信项目,其中涉及到 ...
java如何调用手机拍照功能_手把手教你如何实现拍照功能
实现手机拍照功能,纯JS书写 First: 先上图为主,再做详细讲解: 需要注意的是这里的摄像头是主要是通过浏览器中的一个叫做Navigator属性在JS代码运行时打开页面自动开启不明白?直接上代码 ...
前端调用手机拍照功能失败，调用相机没反应
开发过程中需要再ios app的WKwebview里面嵌入前端页面,这时候前端页面可能有需要打开手机相机拍照或者打开手机相册功能,有时候是点击没反应,有时候是点击后能够打开相机或相册,然后拍完照片确定 ...
原生js 调用电脑摄像头完成拍照
原生js 调用电脑摄像头完成拍照人脸登录新发版1.0x 免费开源,保姆级别教程人脸登录地址 1 ,完成拍照后可转换成base64码,你可以对当前base64码进行操作,当初我就利用这个功能点完成前端 ...
原生html调手机拍照,如何让HTML5调用手机摄像头拍照——实践就是一切
原文:如何让HTML5调用手机摄像头拍照--实践就是一切 NanShan 小编将思路提供给了大家,学编程最重要的是实践,我这虽然有完善的代码,但是希望大家都可以自己写出属于自己的代码 HTML5 Th ...
Android开发之手机拍照功能的实现（源代码分享）
Android系统里调用手机拍照的功能有两种方法一种直接调用手机自带的相机另一种就是使用自己做的拍照应用.比如Camera360 一款于各操作系统都有的的功能强大的手机摄影软件:能拍摄出不同风格,不同 ...
安卓开发：使用手机拍照功能
概述在安卓开发过程中,使用手机拍照功能的核心代码其实非常简单,仅仅只是一句呼唤系统Intent而已: Intent intent = new Intent("android.media.a ...
android控制手机拍照代码,Android开发之手机拍照功能的实现（源代码分享）
Android系统里调用手机拍照的功能有两种方法一种直接调用手机自带的相机另一种就是使用自己做的拍照应用.比如Camera360 一款于各操作系统都有的的功能强大的手机摄影软件:能拍摄出不同风格,不同 ...
h5调起手机拍照功能
最近做了h5调起手机拍照功能,记录一下 <img width="149" height="149" alt="" onclick=&q ...

原生js调用手机拍照功能

原生js调用手机拍照功能

原生js调用手机拍照功能相关推荐

最新文章

热门文章