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

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

起因是我现在再做一个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(); //清除本地数据
				plus.runtime.restart(); //重启
				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 = plus.camera.getCamera();
	c.captureImage(function(e) {
		plus.io.resolveLocalFileSystemURL(e, function(entry) { //读取文件
			var s = entry.toLocalURL() + "?version=" + new Date().getTime(); //获取本地路径
			console.log(s);
			document.getElementById("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) { //从系统相册选择图片
		plus.io.resolveLocalFileSystemURL(a, function(entry) { //读取文件
			plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
				root.getFile("head.jpg", {}, function(file) { //读取文件
					//文件存在
					file.remove(function() {
						console.log("file remove success");

						//entry.copyTo( parent, newName, succesCB, errorCB );  
						//parent: ( DirectoryEntry ) 必选 要拷贝到的目标目录  
						//newName: ( DOMString ) 可选 拷贝后的目录名称，默认为原始目录名称  
						//succesCB: ( EntrySuccessCallback ) 可选 拷贝目录成功的回调函数  
						//回调函数中的参数保存新的目录对象。  
						//errorCB: ( FileErrorCallback ) 可选 拷贝目录失败的回调函数 
						entry.copyTo(root, 'head.jpg', function(e) {
							var e = e.fullPath + "?version=" + new Date().getTime(); // e.FullPath返回文件发生变化的路径加文件名
							document.getElementById("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() {
					//文件不存在
					entry.copyTo(root, 'head.jpg', function(e) {
							var path = e.fullPath + "?version=" + new Date().getTime();
							document.getElementById("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) {
		plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
			var s = entry.fullPath + "?version=" + new Date().getTime();;
			document.getElementById("head-img").src = s;
		}, function(e) {
			document.getElementById("head-img").src = '../../common/bootstrap-solid.svg';
		})
	} else {
		document.getElementById("head-img").src = '../../common/bootstrap-solid.svg';
	}
}
//初始化和预览图片
function initImgPreview() {
	var imgs = document.querySelectorAll("img.mui-action-preview"); //此示例返回文档中所有<img>元素的列表，其中class包含mui-action-preview
	imgs = mui.slice.call(imgs);
	if(imgs && imgs.length > 0) {
		var slider = document.createElement("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 = document.createElement("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";
				_slider.refresh();
				_slider.gotoItem(index, 0);
			})
			var item = document.createElement("div");
			item.classList.add("mui-slider-item");
			var a = document.createElement("a");
			var img = document.createElement("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;/*设置图片超出不显示*/
}