首页 > 电脑主机 >

html5相机拍照

电脑杂谈　发布时间：2020-06-14 05:29:10　来源：网络整理

蓝色妖姬摄像能拍照吗_拍照进入相册_拍照摄像最好的手机

前端时间使用HTML5制作一个WEB端APP，该应用使用了在H5页面上调用手机的功能. 当时花了很多时间来学习. 最后，使用HTML5plus（HTML5 +）来完成该功能. 现在，我们将简要介绍具体方法并说明使用注意事项.

特定过程: 单击以触发以选择照片或相册->拍摄照片或相册以选择照片->获取要压缩的图像路径->读取文件并将其显示在页面上

首先，它是html代码. 这很简单. 它是添加一个按钮并单击以触发事件. 在这里，我不会将css文件放出来. 每个人都知道这是一个添加按钮.

拍照进入相册_拍照摄像最好的手机_蓝色妖姬摄像能拍照吗

<h2 class="title-detail">
                   	图片描述
                </h2>
                <input type="hidden" id="picIndex" value="0">
                <div id='image-list' class="row image-list">
                	<!-- <input id="upload_image" type="file" name="image" accept="image/*" /> -->
                	 <div class="image-item space" onclick="showActionSheet()">
                		<div class="image-up"></div>
                	</div>
                </div>

稍后让我们看一下特定的js代码. 根据我们上面提到的方法，它分为5种方法，如下所示:

//图片显示
       function showPics(url,name){    	   
    	 //根据路径读取到文件 
           plus.io.resolveLocalFileSystemURL(url,function(entry){
        	   entry.file( function(file){
        		   var fileReader = new plus.io.FileReader();
        		   fileReader.readAsDataURL(file);
                   	   fileReader.onloadend = function(e) {
                	       var picUrl = e.target.result.toString();
                	       var picIndex = $("#picIndex").val();
	               		var nowIndex = parseInt(picIndex)+1;
	               		$("#picIndex").val(nowIndex);
	               		var html = '';
	               		html += '<div class="image-item " id="item'+nowIndex+'">';
	               		html += '<div class="image-close" onclick="delPic('+nowIndex+')">X</div>';
	               		html += '<div><img src="'+picUrl+'" class="upload_img" style="width:100%;height:100%;"/></div>';
	               		html += '</div>';
	               		html += $("#image-list").html();
	               		$("#image-list").html(html); 
                   	}
        	   });
          }); 
       }
     	//压缩图片  
       function compressImage(url,filename){  
           var name="_doc/upload/"+filename;
           plus.zip.compressImage({  
                   src:url,//src: (String 类型 )压缩转换原始图片的路径  
                   dst:name,//压缩转换目标图片的路径  
                   quality:40,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
                   overwrite:true//overwrite: (Boolean 类型 )覆盖生成新文件  
               },  
               function(zip) {
            	   //页面显示图片
            	   showPics(zip.target,name);
               },function(error) {  
                   plus.nativeUI.toast("压缩图片失败，请稍候再试");  
           });  
       } 
      
     	//调用手机并拍照
       function getImage() {  
           var cmr = plus.camera.getCamera();  
           cmr.captureImage(function(p) {  
               plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                   compressImage(entry.toLocalURL(),entry.name);  
               }, function(e) {  
                   plus.nativeUI.toast("读取拍照文件错误：" + e.message);  
               });  
           }, function(e) {  
           }, {  
               filter: 'image' 
           });  
       }
       //从相册选择照片
       function galleryImgs() {  
    	    plus.gallery.pick(function(e) {  
    	    	var name = e.substr(e.lastIndexOf('/') + 1);
    	       compressImage(e,name);
    	    }, function(e) {  
    	    }, {  
    	        filter: "image"  
    	    });  
    	}
       
       //点击事件，弹出选择和相册的选项
    	function showActionSheet() {  
    	    var bts = [{  
    	        title: "拍照"  
    	    }, {  
    	        title: "从相册选择"  
    	    }];  
    	    plus.nativeUI.actionSheet({  
    	            cancel: "取消",  
    	            buttons: bts  
    	        },  
    	        function(e) {  
    	            if (e.index == 1) {  
    	                getImage();  
    	            } else if (e.index == 2) {  
    	                galleryImgs();  
    	            }  
    	        }  
    	    );  
    	}

拍照进入相册_蓝色妖姬摄像能拍照吗_拍照摄像最好的手机

有几点要说明: （1）: 压缩图片方法，这里我使用重写新文件（2）: 图片显示方法，此方法非常重要. 因为我坐在这里的Web端APP，所以页面全部由服务器返回. 我们可以得到的是手机的本地图片. 许多谚语直接显示文件路径，但我没有显示. 因此，我使用FileReader读取了本地文件e.target.result.toString（）;. 此方法返回图片的base64编码，因此您在下面看到的是我正在动态拼写HTML页面的内容，直接是内容. 分配给img标签的src可以直接显示图片. [我已经纠缠了很长时间]使用此base64编码的URL拍照进入相册，我们可以将其直接上传到后台.

在这里，我们主要讨论不同包装工具所需的不同任务. 我在这里使用Hbuilder进行打包. 当然，外壳程序也可以打包在Android环境中. 请注意以下几点.

Hbuilder: 这是一个非常方便的Web开发工具，可以打包APP. [由于网络问题，我无法上传图片，请尽量描述它们. ]我们需要在Hbuilder中构建一个APP项目，单击manifest.json文件，此文件是我们APP的配置信息，以下导航栏是: 应用程序信息，图标配置，启动Flash配置，SDK配置，权限模块配置等. 通常，我们需要配置应用程序信息（应用程序名称，入口），图标，启动Flash（您可以选择开始图片），SDK配置通常是一些地图，付款，推送等. 重要的一点是，如果我们使用HTML5 +，则需要选择在模块权限配置中使用的功能. 例如，如果我们使用plus.nativeUI. *，则需要选择NativeUI（本机UI）模块，即拍照进入相册，我们使用plus.xx. *，则需要检查相应的模块. [此manifest.json是一个可视界面，您可以通过下载和安装它来了解它. ] Android环境: 与Hbuilder相比，Android环境要复杂一些. 由于我尚未在Android环境中进行此操作，因此这里仅提供一些有关使用Hbuilder官方网站的说明.

拍照进入相册_蓝色妖姬摄像能拍照吗_拍照摄像最好的手机