第一种是HTML方法
<label> <input style="opacity: 0;" type="file" accept="image/*" id="head_img_change"/> <img id="headimg" src="img/erma_search_goods_detail.png"> </label>
1 $(function(){ 2 3 $("#head_img_change").change(function() { 4 var $file = $(this); 5 var fileObj = $file[0]; 6 var windowURL = window.URL || window.webkitURL; 7 var dataURL; 8 var $img = $("#headimg"); 9 if(fileObj && fileObj.files && fileObj.files[0]){ 10 dataURL = windowURL.createObjectURL(fileObj.files[0]); 11 $img.attr('src',dataURL); 12 }else{ 13 dataURL = $file.val(); 14 var imgObj = document.getElementById("headimg"); 15 // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性再加入,无效; 16 // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效; 17 imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; 18 imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; 19 } 20 }); 21 22 })
说明:1)外部加个label是为了把让用户点击的时候在范围内的都会触发input
2)H5 input file上传图片,调用API:<input type="file" accept="image/*;capture=camera">直接调用相机
<input type="file" accept="image/*" />调用相机、图片或者相册
注:部分android机只能调用本地相册,相机调用不了或者只能调用相机,不能调用相册。
3)此方法是网上的一种方法,做了兼容的,IE6以上都能正常运行。
第二种为MUI方法
1)内容链接:http://www.bcty365.com/content-146-3648-1.html
2)需要改一下 点击头像触发 里的
拍照触发的对象的ID名改成自己的就行了。
还需要修改一下 上传图片 里的一点代码就可以用了:
var mainImage= document.getElementById("headimg");
mainImage.src = imgPath;
说明:这一部分改成上面的那两句就可以了,因为我原来放图片的地方设置有宽高,mainImage给它一个装图片的对象就行了。
1 //拍照触发监听 2 document.getElementById("changeimg").addEventListener("tap", function() { 3 if (mui.os.plus) { 4 5 var a = [ 6 { title: "拍照" }, 7 { title: "从手机相册选择" } 8 ] 9 10 plus.nativeUI.actionSheet({ 11 title: "修改用户头像", 12 cancel: "取消", 13 buttons: a 14 }, function(b) { //actionsheet 点击之后出现的东西 15 switch (b.index) { 16 case 0: 17 break; 18 case 1: 19 getpic(); 20 break; 21 case 2: 22 getimg(); 23 break; 24 default: 25 break; 26 } 27 }) 28 } 29 }) 30 //拍照 31 function getpic() { 32 var c = plus.camera.getCamera(); 33 c.captrueImage(function(e) { 34 plus.io.resolveLocalFileSystemURL(e, function(entry) { 35 var s = entry.toLocalURL() + "?version=" + new Date().getTime(); 36 uploadHead(s); //上传图片 37 }, function(e) { 38 console.log("读取拍照文件错误" + e.message) 39 }) 40 }, function(s) { 41 console.log("error" + s); 42 }, { 43 filname: "_doc/head.png" 44 }) 45 } 46 47 //获取相册 48 function getimg() { 49 plus.gallery.pick(function(a) { 50 plus.io.resolveLocalFileSystemURL(a, function(entry) { 51 plus.io.resolveLocalFileSystemURL("_doc/", function(root) { 52 root.getFile("head.png", {}, function(file) { 53 //文件已存在 54 file.remove(function() { 55 console.log("删除成功"); 56 entry.copyTo(root, "head.png", function(e) { 57 var e = e.fullPath + "?version=" + new Date().getTime(); 58 uploadHead(e); /*上传图片*/ 59 //变更大的图预览的src 60 //目前只有一张图暂且这样处理,后续需要用标准组件实现 61 }, function(e) { 62 console.log("copy img file:" + e.message); 63 }); 64 }, function() { 65 console.log("删除" + e.message) 66 }); 67 }, function() { 68 //文件不存在 69 entry.copyTo(root, "head.png", function(e) { 70 var path = e.fullPath + "?version=" + new Date().getTime(); 71 uploadhead(path); /*上传图片*/ 72 }, function(e) { 73 console.log("copy img file:" + e.message); 74 }); 75 }); 76 }, function(e) { 77 console.log("get _www folder fail"); 78 }) 79 }, function(e) { 80 console.log("读取拍照文件错误" + e.message); 81 }) 82 }, function(a) {}, { 83 filter: "image" 84 }) 85 } 86 //上传头像图片 87 function uploadHead(imgPath) { 88 var mainImage = document.getElementById("headimg"); 89 mainImage.src = imgPath; 90 91 var image = new Image(); 92 image.src = imgPath; 93 image.onload = function() { 94 var imgData = getBase64Image(image); 95 96 $.ajax({ 97 type: "post", 98 data: imgData, 99 url: "http://10.8.165.31/ceshi/reuserimg.php", 100 success: function(data) { 101 console.log("ajax成功") 102 console.log(data); 103 }, 104 error: function() { 105 console.log("ajax失败") 106 } 107 }); 108 } 109 } 110 111 112 //转换64 113 function getBase64Image(img) { 114 var canvas = document.createDocument("canvas"); 115 var width = img.width; 116 var height = img.height; 117 118 if (width > height) { 119 if (width > 100) { 120 height = Math.round(height *= 100 / width); 121 width = 100; 122 } 123 } else { 124 if (height > 100) { 125 width = Math.round(width *= 100 / height); 126 height = 100; 127 } 128 } 129 130 canvas.width = width; 131 canvas.height = height; 132 133 var ctx = canvas.getContext("2d"); 134 ctx.drawImage(img, 0, 0, width, height); /*绘图*/ 135 var dataURL = canvas.toDataURL("image/png", 0.8); 136 return dataURL.replace("data:image/png;base64,", ""); 137 138 }