上传图片回显,获取手机相机拍照并回显(因为框架是mui,别的不知道行不行,仅供参考吧,上传附件应该是可以)

mui最近的项目有个上传照片,和拍照,贴一下代码记录一下

1,上传很简单就是file就行,然后获取上传照片img的src,赋值给img添加src(但是file还可以上传文件,就不能回显了,显示照片那会出现那个img找不到src的样子。不知道有没有什么办法回显,或者有什么别的好的展示方案,希望有留言提示)

attr('src',URL.createObjectURL($(this)[0].files[0]));

2,拍照上传图片回显

点击调用方法

document.getElementById('faceVali').addEventListener('click', function() {
       getImage()
    },false);

拍照

function getImage() { 
        var c = plus.camera.getCamera(); 
        c.captureImage(function(e) { 
            plus.io.resolveLocalFileSystemURL(e, function(entry) { 
                var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 
                uploadHead(s); /*上传图片*/ 
            }, function(e) { 
                console.log("读取拍照文件错误:" + e.message); 
            }); 
        }, function(s) { 
            console.log("error" + s); 
        }, { 
            filename: "_doc/head.png" 
        }) 
    }

上传

function uploadHead(imgPath) { 
          console.log("拍了"+inds);
            //var mainImage = $("img[name=personalCreditImg2]").eq(inds);
            
            // 解析发票
            //console.log("图片信息--"+mainImage.files);
                    console.log("imgPath-------- " + imgPath); 
          if(types == "piao"){
               $(".personalCreditImg2").eq(inds).attr('src',imgPath);
               $(".personalCreditImg2").eq(inds).css({"width":"90px","height":"90px"});
          }else if(types == "jian"){
               $(".personalCreditImg").eq(inds).attr('src',imgPath);
               $(".personalCreditImg").eq(inds).css({"width":"90px","height":"90px"});
          }

      } 

随便记录的,还有个图片转成base64,这个我没有验证

function getBase64Image(img) { 
                var canvas = document.createElement("canvas"); 
                var width = img.width; 
                var height = img.height; 
                // calculate the width and height, constraining the proportions 
                if (width > height) { 
                    if (width > 100) { 
                        height = Math.round(height *= 100 / width); 
                        width = 100; 
                    } 
                } else { 
                    if (height > 100) { 
                        width = Math.round(width *= 100 / height); 
                        height = 100; 
                    } 
                } 
                canvas.width = width;   /*设置新的图片的宽度*/ 
                canvas.height = height; /*设置新的图片的长度*/ 
                var ctx = canvas.getContext("2d"); 
                ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 
                var dataURL = canvas.toDataURL("image/png", 0.8); 
                return dataURL.replace("data:image/png;base64,", ""); 
            }    

        function photoerror(img){
            img.src="img/mryh.png";
            img.null;   //控制不要一直跳动
        }

 

posted @ 2020-04-17 10:35  武向前  阅读(564)  评论(0)    收藏  举报