关于本地头像，不上传网络和数据库

关于本地头像，不上传网络和数据库

怎么说呢，同样是不是很实用，只适合本地自己看，没有做上传到服务器交互。

起因是我现在再做一个APP，用HBulider做的。需要有一个修改头像，大概如图：

话不多说，流程大概就是点击头像出现然后选择更改。
set.html

<ul class="mui-table-view" id="setTitle"><li class="mui-table-view-cell"><a id="head" class="mui-navigate-right" ><img class="head-img mui-action-preview" id="head-img" src="" /><div id="nickname"></div><div id="username"></div></a></li></ul>

set.js

function closeApp() {plus.nativeUI.actionSheet({cancel: "取消",buttons: [{title: "注销当前账号"}, {title: "直接关闭应用"}]}, function(e) {var index = e.index;switch(index) { //case 0: 取消,不做任何操作case 1:localStorage.clear(); //清除本地数据start(); //重启break;case 2:plus.runtime.quit(); //退出程序break;}});
};//更换头像
setTimeout(function() {defaultImg();setTimeout(function() {initImgPreview();}, 300);
}, 500);//点击class为mui-table-view-cell的id为head的a标签做出的点击事件。
mui(".mui-table-view-cell").on("tap", "#head", function(e) { if(mui.os.plus) {var a = [{title: "拍照"}, {title: "从手机相册选择"}];plus.nativeUI.actionSheet({title: "修改头像",cancel: "取消",buttons: a},function(b) {switch(b.index) {case 0:break;case 1:getImage();break;case 2:galleryImg();break;default:break}})}
});
//点击拍照执行事件
function getImage() {var c = Camera();c.captureImage(function(e) {solveLocalFileSystemURL(e, function(entry) { //读取文件var s = LocalURL() + "?version=" + new Date().getTime(); //获取本地路径console.log(s);ElementById("head-img").src = s;//变更大图预览的src//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现document.querySelector("#__mui-imageview__group .mui-slider-item img").src = s + "?version=" + new Date().getTime();;;}, function(e) {console.log("读取拍照文件错误：" + e.message);});}, function(s) {console.log("error" + s);}, {filename: "_doc/head.jpg"})
}
//从相册选择（不进行服务器交互）
function galleryImg() {plus.gallery.pick(function(a) { //从系统相册选择图片solveLocalFileSystemURL(a, function(entry) { //读取文件solveLocalFileSystemURL("_doc/", function(root) {File("head.jpg", {}, function(file) { //读取文件//文件存在ve(function() {console.log("file remove success");//pyTo( parent, newName, succesCB, errorCB );  //parent: ( DirectoryEntry ) 必选 要拷贝到的目标目录  //newName: ( DOMString ) 可选 拷贝后的目录名称，默认为原始目录名称  //succesCB: ( EntrySuccessCallback ) 可选 拷贝目录成功的回调函数  //回调函数中的参数保存新的目录对象。  //errorCB: ( FileErrorCallback ) 可选 拷贝目录失败的回调函数 pyTo(root, 'head.jpg', function(e) {var e = e.fullPath + "?version=" + new Date().getTime(); // e.FullPath返回文件发生变化的路径加文件名ElementById("head-img").src = e; //存储到head-img的src里面。//变更大图预览的src//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;}, function(e) {console.log('copy image fail:' + e.message);});}, function() {console.log("delete image fail:" + e.message);});}, function() {//文件不存在pyTo(root, 'head.jpg', function(e) {var path = e.fullPath + "?version=" + new Date().getTime();ElementById("head-img").src = path;//变更大图预览的src//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;},function(e) {console.log('copy image fail:' + e.message);});});}, function(e) {console.log("get _www folder fail");})}, function(e) {console.log("读取拍照文件错误：" + e.message);});}, function(a) {}, {filter: "image"})
};
//默认
function defaultImg() {if(mui.os.plus) {solveLocalFileSystemURL("_doc/head.jpg", function(entry) {var s = entry.fullPath + "?version=" + new Date().getTime();;ElementById("head-img").src = s;}, function(e) {ElementById("head-img").src = '../../common/bootstrap-solid.svg';})} else {ElementById("head-img").src = '../../common/bootstrap-solid.svg';}
}
//初始化和预览图片
function initImgPreview() {var imgs = document.querySelectorAll("img.mui-action-preview"); //此示例返回文档中所有<img>元素的列表，其中class包含mui-action-previewimgs = mui.slice.call(imgs);if(imgs && imgs.length > 0) {var slider = ateElement("div");slider.setAttribute("id", "__mui-imageview__");slider.classList.add("mui-slider");slider.classList.add("mui-fullscreen");slider.style.display = "none";slider.addEventListener("tap", function() {slider.style.display = "none";});slider.addEventListener("touchmove", function(event) {event.preventDefault();})var slider_group = ateElement("div");slider_group.setAttribute("id", "__mui-imageview__group");slider_group.classList.add("mui-slider-group");imgs.forEach(function(value, index, array) {//给图片添加点击事件，触发预览显示；value.addEventListener('tap', function() {slider.style.display = "block";_fresh();_Item(index, 0);})var item = ateElement("div");item.classList.add("mui-slider-item");var a = ateElement("a");var img = ateElement("img");img.setAttribute("src", value.src);a.appendChild(img)item.appendChild(a);slider_group.appendChild(item);});slider.appendChild(slider_group);document.body.appendChild(slider);var _slider = mui(slider).slider();}
}

实现的功能就是点击图片能看到大图，点击一整行可以跳出修改图像的选项。
其中border-radius: 50%;设置显示成圆形。object-fit: cover;/设置图片超出不显示/

.head-img {width: 75px;height:75px;float: left;margin-right: 20px;border-radius: 50%;object-fit: cover;/*设置图片超出不显示*/
}