H5调用手机摄像头和相册更换头像

最新推荐文章于 2021-06-04 20:43:06 发布

csdnhyms

最新推荐文章于 2021-06-04 20:43:06 发布

阅读量1.1k

点赞数 1

文章标签： js html5

本文链接：https://blog.csdn.net/csdnhyms/article/details/108638804

版权

这篇博客介绍了如何使用H5调用手机摄像头和相册进行头像更换，提供了详细的代码逻辑和示例链接，旨在帮助开发者避免寻找资料的困扰。点击img元素触发showActionSheet事件，接着用户可以选择拍照或从相册选取图片，经过compressImage压缩后保存，最终在页面上展示新头像。

摘要由CSDN通过智能技术生成

H5调用手机摄像头和相册更换头像

参考大佬的案例做出的一些调整，更适合做app更换头像操作。
找了一天的资料，并作出的修改，呜呜呜！为了不让你们少走弯路，全都奉献出来。
大佬链接：https://blog.csdn.net/qq_27626333/article/details/51896616

如下图所示：
在这里插入图片描述

在这里插入图片描述

案例代码：
链接：https://pan.baidu.com/s/1XREYIDccUKJ4EVSNErMC4Q
提取码：51u8

主要的功能是更换头像，点击img 跳出两个选项，选择摄像头或者相册，然后选择图片，更换img 路径即可！逻辑很简单。

<body>
		
		<div class="header">
			<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">  
			<img class="messageimg" src="images/img/icon_message.png" />
			<img class="touxiang" id="touxiang" src="images/img/logo(2).png" onclick="showActionSheet(this)"/>
		</div> 	
	</body>

这里img点击事件：οnclick=“showActionSheet(this)”

var procinstid = 0;  
    //初始化页面执行操作  
    function plusReady() {
     
        //Android返回键监听事件  
        plus.key.addEventListener('backbutton',function(){
     
            myclose();  
        },false);  
    }  
    if (window.plus) {
     
        plusReady();  
    } else {
     
        document.addEventListener('plusready', plusReady, false);  
    }  
        //加载页面初始化需要加载的图片信息  
        //或者相册IMG_20160704_112620.jpg  
        //imgId:图片名称：1467602809090或者IMG_20160704_112620  
        //imgkey:字段例如：F_ZDDZZ  
        //ID：站点编号ID,例如429  
        //src：src="file:///storage/emulated/0/Android/data/io.dcloud.HBuilder/.HBuilder/apps/HBuilder/doc/upload/F_ZDDZZ-1467602809090.jpg"  
        function showImgDetail (imgId,imgkey,id,src) {
       
			
			/* document.getElementsByTagName('touxiang')[0].className += 'yincang';
            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" οnclick="delImg(\''+imgId+'\',\''+imgkey+'\','+id+');">';         
            html +='        <div class="fa fa-times-circle"></div>';      
            html +='    </span>';   
            html +='</div>';
			
            $("#"+imgkey+"S").append(html);  */
			
			
			document.getElementById("touxiang").src=src 
        }  
        //删除图片  
        //imgId:图片名称：IMG_20160704_112614  
        //imgkey:字段，例如F_ZDDZZ  
        //ID：站点编号ID，例如429  
        function delImg(imgId,imgkey,id){