MUI如何调取相册的方法

第一种是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>  
 $(function(){

     $("#head_img_change").change(function() {
      var $file = $(this);
      var fileObj = $file[0];
      var windowURL = window.URL || window.webkitURL;
      var dataURL;
      var $img = $("#headimg");
      if(fileObj && fileObj.files && fileObj.files[0]){
        dataURL = windowURL.createObjectURL(fileObj.files[0]);
        $img.attr('src',dataURL);
      }else{
        dataURL = $file.val();
        var imgObj = document.getElementById("headimg");
        // 1、在设置filter属性时,元素必须已经存在在DOM树中,动态创建的Node,也需要在设置属性前加入到DOM中,先设置属性再加入,无效;
        // 2、src属性需要像下面的方式添加,上面的两种方式添加,无效;
        imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
        imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
      }
    });   })

  说明: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)需要改一下  点击头像触发   里的MUI如何调取相册的方法

  拍照触发的对象的ID名改成自己的就行了。

  还需要修改一下   上传图片  里的一点代码就可以用了:

  var mainImage= document.getElementById("headimg");

  mainImage.src = imgPath;

    说明MUI如何调取相册的方法这一部分改成上面的那两句就可以了,因为我原来放图片的地方设置有宽高,mainImage给它一个装图片的对象就行了。

 //拍照触发监听
document.getElementById("changeimg").addEventListener("tap", function() {
if (mui.os.plus) { var a = [
{ title: "拍照" },
{ title: "从手机相册选择" }
] plus.nativeUI.actionSheet({
title: "修改用户头像",
cancel: "取消",
buttons: a
}, function(b) { //actionsheet 点击之后出现的东西
switch (b.index) {
case 0:
break;
case 1:
getpic();
break;
case 2:
getimg();
break;
default:
break;
}
})
}
})
//拍照
function getpic() {
var c = plus.camera.getCamera();
c.captrueImage(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);
}, {
filname: "_doc/head.png"
})
} //获取相册
function getimg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("删除成功");
entry.copyTo(root, "head.png", function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上传图片*/
//变更大的图预览的src
//目前只有一张图暂且这样处理,后续需要用标准组件实现
}, function(e) {
console.log("copy img file:" + e.message);
});
}, function() {
console.log("删除" + e.message)
});
}, function() {
//文件不存在
entry.copyTo(root, "head.png", function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadhead(path); /*上传图片*/
}, function(e) {
console.log("copy img file:" + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误" + e.message);
})
}, function(a) {}, {
filter: "image"
})
}
//上传头像图片
function uploadHead(imgPath) {
var mainImage = document.getElementById("headimg");
mainImage.src = imgPath; var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image); $.ajax({
type: "post",
data: imgData,
url: "http://10.8.165.31/ceshi/reuserimg.php",
success: function(data) {
console.log("ajax成功")
console.log(data);
},
error: function() {
console.log("ajax失败")
}
});
}
} //转换64
function getBase64Image(img) {
var canvas = document.createDocument("canvas");
var width = img.width;
var height = img.height; 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,", ""); }
上一篇:git revert 与 git reset


下一篇:3. JavaScript 数据类型