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

这篇博客介绍了如何使用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){
   
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值