上传图片回显,获取手机相机拍照并回显(因为框架是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; //控制不要一直跳动 }

浙公网安备 33010602011771号