精华内容
下载资源
问答
  • H5调用手机摄像头相册更换头像 参考大佬的案例做出的一些调整,更适合做app更换头像操作。 找了一天的资料,并作出的修改,呜呜呜!为了不让你们少走弯路,全都奉献出来。 大佬链接:...

    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){  
                var bts = ["是", "否"];  
                plus.nativeUI.confirm("是否删除图片?", function(e) {  
                        var i = e.index;  
                        if (i == 0) {  
                            var itemname=id+"img-"+imgkey;//429img-F_ZDDZZ  
                            var itemvalue=plus.storage.getItem(itemname);  
                            //{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}  
                            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){  
                    //alert(p);//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                        //alert(entry.toLocalURL());//file:///storage/emulated/0/DCIM/Camera/IMG_20160704_112620.jpg  
                        //alert(entry.name);//IMG_20160704_112620.jpg  
                        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) {  
                    //alert(p);//_doc/camera/1467602809090.jpg  
                    plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                        //alert(entry.toLocalURL());//file:///storage/emulated/0/Android/data/io.dcloud...../doc/camera/1467602809090.jpg  
                        //alert(entry.name);//1467602809090.jpg  
                        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.jpg  
                plus.zip.compressImage({  
                        src:url,//src: (String 类型 )压缩转换原始图片的路径  
                        dst:name,//压缩转换目标图片的路径  
                        quality:20,//quality: (Number 类型 )压缩图片的质量.取值范围为1-100  
                        overwrite: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){  
                //alert(url);//file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg  
                //alert(path);//_doc/upload/F_ZDDZZ-1467602809090.jpg  
                var  state=0;  
                var wt = plus.nativeUI.showWaiting();  
              //  plus.storage.clear();   
                name=name.substring(0,name.indexOf("."));//图片名称:1467602809090  
                var id = document.getElementById("ckjl.id").value;  
                var itemname=id+"img-"+divid;//429img-F_ZDDZ  
                var itemvalue=plus.storage.getItem(itemname);  
                if(itemvalue==null){  
                    itemvalue="{"+name+","+path+","+url+"}";//{IMG_20160704_112614,_doc/upload/F_ZDDZZ-IMG_20160704_112614.jpg,file:///storage/emulated/0/Android/data/io.dcloud...../doc/upload/F_ZDDZZ-1467602809090.jpg}  
                }else{    
                    itemvalue=itemvalue+"{"+name+","+path+","+url+"}";  
                }  
                plus.storage.setItem(itemname, itemvalue);  
                  
                //var src = 'src="'+url+'"';  
    			var 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(getUrl() + 'url', {  
                                    method: "POST"  
                                },  
                                function(t, status) {  
                                    if (status == 200) {  
                                        console.log("上传成功");  
                                         $.ajax({  
                                            type: "post",  
                                            url: getUrl() + 'url',  
                                            data: {  
                                                taskId: taskId,  
                                                voteAgree: agree,  
                                                back: back,  
                                                voteContent: $("#assign").val(),  
                                            },  
                                            async: true,  
                                            dataType: "text",  
                                            success: function(data) {  
                                                wa.close();  
                                                goList(data);  
                                              
                                                  
                                            },  
                                            error: function() {  
                                                wa.close();  
                                                myAlert("网络错误,提交审批失败,请稍候再试");  
                                            }  
                                        });  
                                           
                                          
                                    } 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();  
                  
            }  
    

    js代码如上:

    代码逻辑:

    首先触发点击事件(showActionSheet)---->然后选择 拍照(getImage)或选择相片(galleryImg)---->然后压缩图片,毕竟一张图片很大,需要压缩(compressImage)---->保存图片(saveimage)----->最后显示图片(showImgDetail).
    逻辑还是很简单的。大家可以具体看一下案例,跑一下。

    再次感谢https://blog.csdn.net/qq_27626333/article/details/51896616

    展开全文
  • H5调用手机摄像头相册

    千次阅读 2019-04-01 23:23:07
    //调用手机摄像头并拍照 function getImage() { var cmr = plus.camera.getCamera(); cmr.captureImage(function(p) { plus.io.resolveLocalFileSystemURL(p, function(entry) { compressImage...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>Insert title here</title>
    		<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<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>
    		<div class="image-item space" onclick="showActionSheet()">
    			<button class="image-up">拍照</button>
    		</div>
    
    	</body>
    	<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    	<script type="text/javascript">
    		//图片显示
    		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(this)">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);
    						console.log(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 delPic(a) {
    			$(a).next().remove();
    			$(a).remove()
    		}
    
    
    
    
    
    		//点击事件,弹出选择摄像头和相册的选项
    		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();
    					}
    				}
    			);
    
    
    
    		}
    	</script>
    </html>
    

     

    展开全文
  • * 调用ios,安卓手机摄像头相册 */ HTML: <a href="javascript:;" class="file"> 自定义的文本框 <input id="car_file" type="file" accept="image/*" multiple /> </a> CSS: ....
    /*
     * 调用ios,安卓手机摄像头和相册
     */
    HTML:
    <a href="javascript:;" class="file">
        自定义的文本框
        <input id="car_file" type="file" accept="image/*" multiple />
    </a>
    
    CSS:
    .file {
        position: relative;
        display: inline-block;
        background: #ffffff;/*--#D0EEFF;*/
        border: 1px solid #999;
        border-radius: 0px;
        /*padding: 4px 12px;*/
        overflow: hidden;
        /*color: #1E88C7;*/
        text-decoration: none;
        text-indent: 0;
        /*line-height: 20px;*/
    }
    .file input {
        position: absolute;
        /*font-size: 100px;*/
        right: 0;
        top: 0;
        opacity: 0;
    }
    
    //当文本框改变时
    $("#car_file").change(function(){
       readURL(this);
    });    
    
    function readURL(input) {
        if(input.files.length>0){
            for(var a=0;a<input.files.length;a++){
                var reader = new FileReader();
                reader.readAsDataURL(input.files[a]);                
                var i=images.length;
                reader.onload = function (e) {
                    i++;
                    $("#imageDiv").append("<img attr='"+i+"' src='"+e.target.result+"' style='width:100%;height:100%;margin-top:10px;'/>");
                }
            }
        }
    }

     

    转载于:https://www.cnblogs.com/AnswerTheQuestion/p/8317906.html

    展开全文
  • base64,' + url }) } this.isShowUp = false } 以上代码,只能上传单张照片,如果需要在同一界面上传多张照片,就要再写一个函数,用新的函数接收下标值,来判断当前点击的是哪一张,在调用uploadChange函数的函数,...

    html 部分

    js 部分

    getBase64: function (file, callback) {

    var maxWidth = 640

    if (file.files && file.files[0]) {

    var thisFile = file.files[0]

    // if (thisFile.size > 524288) {

    //    this.showToast("图片不能超过512k!");

    //  return;

    // }

    var reader = new FileReader()

    reader.onload = function (event) {

    var imgUrl = event.target.result

    var img = new Image()

    img.onload = function () {

    var canvasId = 'canvasBase64Imgid',

    canvas = document.getElementById(canvasId)

    if (canvas != null) {

    document.body.removeChild(canvas)

    }

    var canvas = document.createElement('canvas')

    canvas.innerHTML = 'New Canvas'

    canvas.setAttribute('id', canvasId)

    canvas.style.display = 'none'

    document.body.appendChild(canvas)

    canvas.width = this.width

    canvas.height = this.height

    var imageWidth = this.width,

    imageHeight = this.height

    if (this.width > maxWidth) {

    imageWidth = maxWidth

    imageHeight = this.height * maxWidth / this.width

    canvas.width = imageWidth

    canvas.height = imageHeight

    }

    var context = canvas.getContext('2d')

    context.clearRect(0, 0, imageWidth, imageHeight)

    context.drawImage(this, 0, 0, imageWidth, imageHeight)

    var base64 = canvas.toDataURL('image/png', 1)

    var imgbase = base64.substr(22)

    callback(imgbase)

    // this.imgUrl =

    }

    img.src = imgUrl

    }

    reader.readAsDataURL(file.files[0])

    }

    },

    uploadChange: function (event) {

    if (event.target.files.length > 0) {

    this.files = event.target.files[0] // 提交的图片

    this.getBase64(event.target, url => {

    document.getElementById("appealimg1").src='data:image/png;base64,' + url

    })

    }

    this.isShowUp = false

    }

    以上代码,只能上传单张照片,如果需要在同一界面上传多张照片,就要再写一个函数,用新的函数接收下标值,来判断当前点击的是哪一张,在调用uploadChange函数的函数,后面就可以拼接下标值了

    展开全文
  • 在手机端调用手机摄像头和相册 如果只想调用相册或者选择文件 如果想调用摄像头
  • <!DOCTYPE HTML><html><head> <title>上传图片</title> <meta charset="utf-8"></head>...iframe name="uploadfrm" id="uploadfrm" style="display: none;"...
  • html5怎样调用手机摄像头或者相册

    千次阅读 2017-08-17 11:32:38
    直接调用相机调用相机 图片或者相册还是要根据手机的类型来说,有些手机只能调相机,有些手机只能调相册,或者两者都行。
  • 使用HTML5+调用手机摄像头相册

    万次阅读 热门讨论 2016-11-17 11:12:17
    主要介绍了采用HTML5plus(HTML5+)的方式调用手机摄像头并拍照,将具体的代码和一些注意事项进行了讲解,并对不同的开发环境使用简单进行了介绍。
  • 使用JS调用手机摄像头相册

    千次阅读 2019-02-25 09:00:12
    //调用手机摄像头并拍照 function getImage() { var cmr = plus.camera.getCamera(); cmr.captureImage(function(p) { plus.io.resolveLocalFileSystemURL(p, function(entry) { compressImage(entry....
  • unigui 调用手机摄像头相册

    千次阅读 2019-04-05 19:25:06
    在切图网一个客户的webapp项目中需要用到 html5调用手机摄像头, 用html5自带的 input file="" , 纯html5,并且不涉及到js ,就可以实现。代码如下: <input type="file" accept="image/*" capture="camera"&...
  • 调用摄像头拍的照片,由于系统对应用拍摄的照片有限制,所以一般不需要进行裁剪。但是直接从相册获取照片时,可能会由于手机相册中的图片太大造成显示不了,所以需要进行剪裁。具体代码如下: activity_main.xml: ...
  • //手机真机操作测试才能调用摄像头相册图片,网页上只能选择图片 chooseImage() { var _this = this uni.chooseImage({ count: 1, //默认9 sizeType: ['original', 'compressed'], /
  • UIAlertController *controller = [UIAlertController alertControllerWithTitle:@"没有摄像头" message:nil preferredStyle:UIAlertControllerStyleActionSheet]; UIAlertAction *action = [UIAlertAction ...
  • <input type="file" multiple="multiple" accept="image/*" id="upload" name="上传图片参数" style="opacity: 0;width: 0/>
  • java微信公众号调用手机摄像头拍照和本地相册,上传服务器,java微信公众号内部调用本地摄像头,web项目
  • input type=file 怎么样调取用户手机照相机 input 有个属性accept="image/*" 这样就可以了,同时在网上看到了其他答案,试了下没啥效果。写记录下来 如下: 使用input:file标签, 去调用系统默认相机,摄像,录音...
  • 调用手机摄像头和相册 <input type="file" capture="camera" accept="image/*" id="cameraInput" name="cameraInput"> 只调用相册或者选择文件 <input type="file" name="file" accept="image/*" >...
  • 1.调用摄像头拍照 2.从相册中选择照片
  • 微信公众号调用手机摄像头拍照和本地相册,上传服务器,不错的例子
  • 在官方H5+ API中barcode通过调用设备的摄像头对二维码进行扫描识别,扫描到二维码后进行解码并返回码数据内容及码类型。但是暂未给出识别手机拍摄的二维码,以下代码实现了此功能。 完整demo:...
  • 调用摄像头相册

    2017-07-17 08:40:00
    1,。首先通过流存储数据 File outputImage = new File(getExternalCacheDir(),"outImage.jpg"),参数一为路径,二为文件名,接下来判断文件是否存在,...下面我们调用我们的摄像头 1.通过Intent启动找的照相机 ...
  • 我们平时在使用QQ或微信的时候经常要和别人分享图片,这些图片可以是用手机摄像头拍的,也可以是从相册中选取的。类似这样的功能实在是太常见了,几乎在每一个应用程序中都会有,那么本节我们就学习一下调用摄像头和...

空空如也

空空如也

1 2 3 4 5 ... 12
收藏数 225
精华内容 90
关键字:

手机摄像头调用相册