HTML5 Plus 拍照或者相册选择图片上传

news/2024/12/29 13:40:17/

  HBuilder+HTML5 Plus+MUI实现拍照或者相册选择图片上传,利用HTML5 Plus的Camera、Gallery、IO、Storage和Uploader来实现手机APP拍照或者从相册选择图片上传。Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。Uploader模块管理网络上传任务,用于从本地上传各种文件到服务器,并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据,数据格式符合Multipart/form-data规范,即rfc1867(Form-based File Upload in HTML)协议。

 拍照或相册选取一张demo下载地址:https://pan.baidu.com/s/1c_J4XSeHObnnx7P3gvC3yw   提取码:19kn

 拍照或相册选取多张demo下载地址:https://pan.baidu.com/s/1Rvq8B9a_hTTu4HsVlJ3OUQ   提取码:ldbg

                             后台java下载地址:https://pan.baidu.com/s/1HaffcoTUS44Ikk3_U_O1Ng      提取码:2064 

<!doctype html>
<html class="feedback"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /><meta name="misapplication-tap-highlight" content="no" /><meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><title>HTML5 Plus 拍照或者相册选择图片上传</title><link rel="stylesheet" href="../../css/mui.min.css"><link rel="stylesheet" type="text/css" href="../../css/app.css" /><link rel="stylesheet" type="text/css" href="../../css/iconfont.css" /><link rel="stylesheet" type="text/css" href="../../css/feedback-page.css" /><link rel="stylesheet" href="../../css/font-awesome.min.css"><script src="../../js/jquery.js"></script><script type="text/javascript" src="../../js/common.js"></script><script type="text/javascript" src="../../js/utitls.js"></script><style type="text/css">.del {position: absolute;top:1px;right: 1px;	display: block;	     line-height: 1;cursor: pointer;color:#fff;}.del:hover {color:#ff3333;}</style><style>.table-view {position: relative;margin-top: 0;margin-bottom: 0;padding-left: 0;list-style: none;background-color: #f5f5f5;}.table-view-cell {position: relative;overflow: hidden;padding: 0px 15px;-webkit-touch-callout: none;margin-bottom: 1px;}.table-view-cell:after {position: absolute;right: 0;bottom: 0;left: 0px;height: 1px;content: '';-webkit-transform: scaleY(.5);transform: scaleY(.5);background-color: #c8c7cc;}.table-view-cell>a:not(.btn) {position: relative;display: block;overflow: hidden;margin: -0px -15px;padding: inherit;white-space: nowrap;text-overflow: ellipsis;color: inherit;background-color: #75b9f4;height: 40px;line-height: 40px;}.navigate-right:after{font-family: Muiicons;font-size: inherit;line-height: 1;position: absolute;top: 50%;display: inline-block;-webkit-transform: translateY(-50%);transform: translateY(-50%);text-decoration: none;color: #666;-webkit-font-smoothing: antialiased;}.table-view-cell.collapse .collapse-content {position: relative;display: none;overflow: hidden;margin: 0px -15px 0px;padding: 0px 0px !important;-webkit-transition: height .35s ease;-o-transition: height .35s ease;transition: height .35s ease;background-color: transparent;}.image-item{position: relative;}.image-item .info{position: absolute;top:0px;left:4px;color: #ff9900;font-size: 12px;						}</style></head><body><header class="bar bar-nav"><h1 class="title">拍照或者相册选择图片上传</h1></header><div class="content"><div style="margin-top: 10px;"></div><input type="hidden" id="ckjl.id" name="ckjl.id" value="429"><div class="collapse-content" ><form><label class="row-label"></label><div id='F_CKJLBS' class="row image-list"><div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div></div></form></div></div><script src="../../js/mui.min.js"></script>
<script>var procinstid = 0;//初始化页面执行操作function plusReady() {//Android返回键监听事件plus.key.addEventListener('backbutton',function(){myclose();},false);}if (window.plus) {plusReady();} else {document.addEventListener('plusready', plusReady, false);}//加载页面初始化需要加载的图片信息function showImgDetail (imgId,imgkey,id,src) {  var html = "";html +='<div  id="Img'+imgId+imgkey+'" class="image-item ">';	html +='	<img id="picBig" data-preview-src="" data-preview-group="1" '+src+'/>';html +='	<span class="del" onclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">';   	html +='		<div class="fa fa-times-circle"></div>';	html +='	</span>';	html +='</div>';$("#"+imgkey+"S").append(html);}//删除图片function delImg(imgId,imgkey,id){var bts = ["是", "否"];plus.nativeUI.confirm("是否删除图片?", function(e) {var i = e.index;if (i == 0) {var itemname=id+"img-"+imgkey;var itemvalue=plus.storage.getItem(itemname);if(itemvalue!=null){var index=itemvalue.indexOf(imgId+",");if(index==-1){//没有找到delImgfromint(imgId,imgkey,id,index);}else{ delImgFromLocal(itemname,itemvalue,imgId,imgkey,index); //修改,加了一个index参数}}else{delImgfromint(imgId,imgkey,id); }}},"查勘", bts);/*var isdel = confirm("是否删除图片?");if(isdel == false){return;}*/}function delImgFromLocal(itemname,itemvalue,imgId,imgkey,index){var wa = plus.nativeUI.showWaiting();var left=itemvalue.substr(0,index-1);var right=itemvalue.substring(index,itemvalue.length);var end=right.indexOf("}");right=right.substring(end+1,right.length);var newitem=left+right;plus.storage.setItem(itemname,newitem); myAlert("删除成功");$("#Img"+imgId+imgkey).remove();wa.close();}//选取图片的来源,拍照和相册function showActionSheet(conf){var divid = conf.id;var actionbuttons=[{title:"拍照"},{title:"相册选取"}];var actionstyle={title:"选择照片",cancel:"取消",buttons:actionbuttons};plus.nativeUI.actionSheet(actionstyle, function(e){if(e.index==1){getImage(divid);}else if(e.index==2){galleryImg(divid);}} );}//相册选取图片function galleryImg(divid) {plus.gallery.pick( function(p){plus.io.resolveLocalFileSystemURL(p, function(entry) {compressImage(entry.toLocalURL(),entry.name,divid);}, function(e) {plus.nativeUI.toast("读取拍照文件错误:" + e.message);});}, function ( e ) {}, {filename: "_doc/camera/",filter:"image"} );}// 拍照function getImage(divid) {var cmr = plus.camera.getCamera();cmr.captureImage(function(p) {plus.io.resolveLocalFileSystemURL(p, function(entry) {compressImage(entry.toLocalURL(),entry.name,divid);}, function(e) {plus.nativeUI.toast("读取拍照文件错误:" + e.message);});}, function(e) {}, {filename: "_doc/camera/",index: 1});}//压缩图片function compressImage(url,filename,divid){var name="_doc/upload/"+divid+"-"+filename;//_doc/upload/F_ZDDZZ-1467602809090.jpgplus.zip.compressImage({src:url,//src: (String 类型 )压缩转换原始图片的路径dst:name,//压缩转换目标图片的路径quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件},function(event) { //uploadf(event.target,divid);var path = name;//压缩转换目标图片的路径//event.target获取压缩转换后的图片url路//filename图片名称saveimage(event.target,divid,filename,path);},function(error) {plus.nativeUI.toast("压缩图片失败,请稍候再试");});}//保存信息到本地/*** * @param {Object} url  图片的地址* @param {Object} divid  字段的名称* @param {Object} name   图片的名称*/function saveimage(url,divid,name,path){var  state=0;var wt = plus.nativeUI.showWaiting();//  plus.storage.clear(); name=name.substring(0,name.indexOf("."));var id = document.getElementById("ckjl.id").value;var itemname=id+"img-"+divid;var itemvalue=plus.storage.getItem(itemname);if(itemvalue==null){itemvalue="{"+name+","+path+","+url+"}";}else{  itemvalue=itemvalue+"{"+name+","+path+","+url+"}";}plus.storage.setItem(itemname, itemvalue);var src = 'src="'+url+'"';//alert("itemvalue="+itemvalue);showImgDetail(name,divid,id,src);wt.close();}//上传图片,实例中没有添加上传按钮function uploadimge(agree,back) {//plus.storage.clear();var wa = plus.nativeUI.showWaiting();var DkeyNames=[];var id = document.getElementById("ckjl.id").value; var length=id.toString().length; var idnmae=id.toString();var numKeys=plus.storage.getLength();var task = plus.uploader.createUpload('http://demo.dcloud.net.cn/helloh5/uploader/upload.php', {method: "POST"},function(t, status) {if (status == 200) {console.log("上传成功");} else {wa.close();console.log("上传失败"); }});task.addData("id",id);for(var i=0; i<imgArray.length;i++){  var itemkey=id+"img-"+imgArray[i];if(plus.storage.getItem(itemkey)!=null){var itemvalue=plus.storage.getItem(itemkey).split("{");for(var img=1;img<itemvalue.length;img++){var imgname=itemvalue[img].substr(0,itemvalue[img].indexOf(","));var imgurl=itemvalue[img].substring(itemvalue[img].indexOf(",")+1,itemvalue[img].lastIndexOf(","));task.addFile(imgurl,{key:imgurl});}}}task.start();}
</script>
</body>
</html>

             

 

 

             


http://www.ppmy.cn/news/526962.html

相关文章

基于相移法的结构光三维测量技术

1. 结构光三维测量原理 1.1 单目结构光系统 结构光投影三维测量系统主要由一个CCD相机、投影仪和PC机组成&#xff0c;如图所示。首先在PC上进行结构光编码&#xff0c;通过投影仪将编码好的结构光投影至物体表面&#xff0c;再由数字相机拍摄受物体表面调制的结构光图像&…

很容易就放弃的摄影学习

我⽼师跟我说过⼀句话&#xff0c;对我这个天⽣很难⾃信的⼈来说⾮常受⽤&#xff0c;虽然我现在也不是⾮常信&#xff0c;我会觉得她只是在⿎励我&#xff0c;她说&#xff1a;“在你拍摄的很多环境⾥&#xff0c;⼤师可能也不会⽐你拍得更好了。”当然这句话有语境&#xff0…

【论文笔记】多时相遥感影像变化检测方法综述

本文是论文《多时相遥感影像变化检测方法综述》的阅读笔记。由于文章是中文的&#xff0c;强烈建议阅读原文&#xff0c;本文也尽可能用文章中的原话来描述问题。 一、变化检测简述 变化检测根据对同一物体或现象在不同时间的观测来确定其不同的处理过程。遥感影像变化检测的研…

彻底解决手机相册照片顺序乱的三种方法

想着偷偷懒&#xff0c;用用一键换机功能来转移手机的三千张照片吧&#xff0c;结果就踩坑了&#xff0c;照片顺序全部被打乱&#xff0c;然后分析了原因&#xff0c;搞了一晚上才解决好。总结出来3种解决办法 一键换机并不完美 前段时间换了新手机&#xff0c;听大家说MIUI自…

前摄器模式

摘 要 现代操作系统为开发并发应用提供了多种机制。同步多线程是一种流行的机制&#xff0c;用于开发同时执行多个操作的应用。但是&#xff0c;线程常常有很高的性能开销&#xff0c;并且需要对同步模式和原理有深入的了解。因此&#xff0c;有越来越多的操作系统支持异步机制…

航摄比例尺、成图比例尺、地面分辨率与航摄设计用图比例尺

文章目录 1. 航摄比例尺2. 成图比例尺3. 地面分辨率4. 航高5. 航摄设计用图比例尺 1. 航摄比例尺 根据武汉大学《摄影测量学》中的定义&#xff1a;航摄比例尺是航摄影像上一线段l与相应地面线段L的水平距离之比&#xff1a; 1 m l L f H (1) \frac{1}{m} \frac{l}{L} \f…

相移法+格雷码

多频外差&#xff1a;需要拍摄多幅图片&#xff0c;对于动态的三维重建不友好 格雷码&#xff1a;高鲁棒性 二值码 亮区域-编码0&#xff0c;暗区域-编码1 假设投射三幅图案&#xff0c;则编码方式如下&#xff1a; 二值码和格雷码比较 相机拍摄–一个像素点正好在黑白相间的…

如何计算摄影参数:分区基准面高程、相对航高、绝对航高、基线长度、航线间隔、航线数、每条航线的相片数、总相片数。

目录 01 什么是分区基准面高程&#xff1f; 1.1 那么什么是分区基准面高程呢&#xff1f; 1.2 为什么分区就能减小起伏&#xff1f; 02 什么是相对航高&#xff1f; 03 什么是绝对航高&#xff1f; 04 什么是基线长度&#xff08;即摄影基线&#xff09;&#xff1f; 05…