HTML5+规范API-拍照功能

傷城~ 2023-09-29 11:53 14阅读 0赞

**完整代码**

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet"/>
        <script type="text/javascript" charset="utf-8">
          	mui.init();
        </script>
    </head>
    <body>
    	<button type="button" class="mui-btn mui-btn-blue" id="btn">按钮</button>
    	<img src="" alt="" id="img1" style="width: 100px;height: 100px;">
    	<script type="text/javascript">
    		// 点击按钮之后进行拍照
    		var btn = document.getElementById("btn");
    		// 点击事件
    		btn.onclick = function(){
          
    			// 得到摄像头对象
    			var cm = plus.camera.getCamera();
    			cm.captureImage(function(filepath){
          
    				// alert(filepath);
    				// 修改绝对路径，方便使用
    				var myimg = plus.io.convertLocalFileSystemURL(filepath);
    				var img1 = document.getElementById("img1");
    				img1.src = myimg;
    			},function(error){
          
    				error.code;
    				error.message;
    			},{
          
    				filename:"",
    				format:"",
    				index:1,
    				popover:{
          }
    			})
    		}
    	</script>
    </body>
    </html>

**效果展示**  
第一步：点击拍照按钮  
![在这里插入图片描述][85f971837fca4464a21661beb3b69e64.png]  
第二步：进行拍照  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pe25YWJLWluZw_size_14_color_FFFFFF_t_70_g_se_x_16]  
第三步，点击“√”后，拍摄的图片展示在Img内  
![在这里插入图片描述][c9f1ce9393754bafa4460c796594325c.png]  
**相关链接**  
1、[MUI的简介][MUI]  
2、[MUI的字体图标][MUI 1]  
3、[MUI的事件处理][MUI 2]  
4、[HbuilderX中新建MUI下的移动端App][HbuilderX_MUI_App]  
5、[H5+ Webview窗口对象][H5_ Webview]  
6、[MUI-底栏实现-页面切换][MUI-_-]  
7、[MUI-标题栏实现-样式复写效果][MUI-_- 1]  
8、[MUI-栅格系统-实现元素排版][MUI-_- 2]  
9、[MUI-列表实现][MUI-]  
10、[MUI-列表实现2][MUI-_2]  
11、[MUI-轮播插件实现-UI组件][MUI-_-UI]  
12、[MUI-弹出菜单][MUI- 1]  
13、[MUI-页面刷新][MUI- 2]  
14、[MUI-新建子页面][MUI- 3]  
15、[MUI-页面之间传值（打开新的子页面）][MUI- 4]  
16、[HTML5+规范API-拍照功能][HTML5_API-]  
17、[HTML5+规范API-系统相册获取功能][HTML5_API- 1]  
18、[HTML5+规范API-地理位置获取][HTML5_API- 2]  
19、[MUI-上拉刷新和下拉刷新][MUI- 5]  
20、[HTML5+规范API-扫码功能][HTML5_API- 3]  
21、[HTML5+规范API-系统通讯录获取功能][HTML5_API- 4]  
22、[Hbuilder无法完成应用程序云打包，一直报错需要打包校验][Hbuilder]  
23、[Hbuilder-应用程序打包][Hbuilder-]  
24、[移动APP开发的三种常见模式][APP]  
25、[IOS系统测试APP时发现input内无法选中并输入值][IOS_APP_input]  
26、[MUI-购物车][MUI- 6]

[85f971837fca4464a21661beb3b69e64.png]: https://img-blog.csdnimg.cn/85f971837fca4464a21661beb3b69e64.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5pe25YWJLWluZw_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/22e69835dfa045009392ebef4d433b04.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pe25YWJLWluZw==,size_14,color_FFFFFF,t_70,g_se,x_16
[c9f1ce9393754bafa4460c796594325c.png]: https://img-blog.csdnimg.cn/c9f1ce9393754bafa4460c796594325c.png
[MUI]: https://blog.csdn.net/blbyu/article/details/124073884
[MUI 1]: https://blog.csdn.net/blbyu/article/details/124073728
[MUI 2]: https://blog.csdn.net/blbyu/article/details/124073670
[HbuilderX_MUI_App]: https://blog.csdn.net/blbyu/article/details/124029950
[H5_ Webview]: https://blog.csdn.net/blbyu/article/details/124087264
[MUI-_-]: https://blog.csdn.net/blbyu/article/details/124089783
[MUI-_- 1]: https://blog.csdn.net/blbyu/article/details/124100509
[MUI-_- 2]: https://blog.csdn.net/blbyu/article/details/124104471
[MUI-]: https://blog.csdn.net/blbyu/article/details/124114095
[MUI-_2]: https://blog.csdn.net/blbyu/article/details/124122849
[MUI-_-UI]: https://blog.csdn.net/blbyu/article/details/124118088
[MUI- 1]: https://blog.csdn.net/blbyu/article/details/124292196
[MUI- 2]: https://blog.csdn.net/blbyu/article/details/124358512
[MUI- 3]: https://blog.csdn.net/blbyu/article/details/124358520
[MUI- 4]: https://blog.csdn.net/blbyu/article/details/124358762
[HTML5_API-]: https://blog.csdn.net/blbyu/article/details/124395810
[HTML5_API- 1]: https://blog.csdn.net/blbyu/article/details/124395849
[HTML5_API- 2]: https://blog.csdn.net/blbyu/article/details/124395903
[MUI- 5]: https://blog.csdn.net/blbyu/article/details/124395907
[HTML5_API- 3]: https://blog.csdn.net/blbyu/article/details/124395916
[HTML5_API- 4]: https://blog.csdn.net/blbyu/article/details/124398657
[Hbuilder]: https://blog.csdn.net/blbyu/article/details/124400424
[Hbuilder-]: https://blog.csdn.net/blbyu/article/details/124400990
[APP]: https://blog.csdn.net/blbyu/article/details/124074019
[IOS_APP_input]: https://blog.csdn.net/blbyu/article/details/124369536
[MUI- 6]: https://blog.csdn.net/blbyu/article/details/124417308