mui H5+ 实现 拍照-加水印-压缩-保存手机存储内部根目录

项目需求，图片拍摄带日期并且在相册中找不到图片。

1.拍摄照片

/*
 * @拍照事件
 */
document.getElementById('captureImage').addEventListener('tap', function() {
	console.log('发起拍照事件')
	var cmr = plus.camera.getCamera();
	var res = cmr.supportedImageResolutions[0];
	var fmt = cmr.supportedImageFormats[0];
	//console.log("Resolution: "+res+", Format: "+fmt);  
	cmr.captureImage(function(path) {
			console.log('照片地址：', path)
			// compressImage(path); 压缩图片
			let date = new Date();
			var timestamp = date.pattern('yyyyMMddHHmmss');
			// console.log(timestamp)
			dealImage(path, function() {
				// console.log('开始写入');
				// console.log(todayDate);
				writefile(timestamp, path);
			});
		},
		function(error) {
			console.log("拍照失败: " + error.message);
		}, {
			resolution: res,
			format: fmt
		}
	);
}, false);

2.canvas加日期

// 用convas绘制图片
function dealImage(path, callback) {
	// console.log('图片地址:', plus.io.convertLocalFileSystemURL(path))
	let date = new Date()
	var dateformat = date.pattern("yyyy-MM-dd HH:mm:ss") //水印内容

	var img = new Image();
	//角度问题 用exif.js 自己尝试吧
	img.onload = function() {
		var that = this;
		// 默认按比例压缩
		var w = that.width,
			h = that.height,
			scale = w / h;
		w = img.width || w;
		h = img.height || (w / scale);
		// console.log(w);
		// console.log(h);
		var quality = 0.5; // 默认图片质量为0.7
		//生成canvas
		var canvas = document.getElementById('myCanvas');
		var ctx = canvas.getContext('2d');
		// 创建属性节点
		var anw = document.createAttribute("width");
		anw.nodeValue = w;
		var anh = document.createAttribute("height");
		anh.nodeValue = h;
		canvas.setAttributeNode(anw);
		canvas.setAttributeNode(anh);
		// console.log(img.width);
		// console.log(h);
		var fontSizeSet = parseInt((w-220)/9.5);
		// console.log("fontSizeSet",fontSizeSet);
		ctx.drawImage(that, 0, 0, w, h);
		ctx.font = fontSizeSet+"px microsoft yahei";
		// ctx.strokeStyle = '#f0ad4e';
		ctx.strokeStyle = 'black';
		ctx.lineWidth = 20;
		// ctx.fillStyle = "#ffffff";
		ctx.fillStyle = "firebrick";
		ctx.strokeText(dateformat, 110, 320);
		// ctx.strokeText(dateformat,50,180);
		ctx.fillText(dateformat, 110, 320);
		// 图像质量
		/* if(obj.quality && obj.quality <= 1 && obj.quality > 0){
		 quality = obj.quality;
		} */
		// quality值越小，所绘制出的图像越模糊
		//var base64 = canvas.toDataURL('image/jpeg', 1 );
		// 回调函数返回base64的值
		callback();
		//console.log("dealimage5："+utils.dateFormat("YYYY-mm-dd HH:MM:SS", new Date()))
	}
	img.src = plus.io.convertLocalFileSystemURL(path);
	//console.log("dealimage6："+utils.dateFormat("YYYY-mm-dd HH:MM:SS", new Date()))
}

3.读取文件压缩

//获取系统文件
/*
 * 照片名,源文件路径
 * 删除原图  base压缩转成图片
 * */

function writefile(name, imgEntryName) {
	console.log("文件名：" + name);
	var canvas = document.getElementById('myCanvas');
	var base64 = canvas.toDataURL('image/jpeg', 0.3);

	SDRoot = getSDRoot() + '/ztzq';
	var imgsPath = SDRoot + '/' + todayDate;

	creatFolder(imgsPath); //创建文件夹

	// console.log(SDRoot);
	// console.log(imgsPath);

	var bitmap = new plus.nativeObj.Bitmap();
	bitmap.loadBase64Data(base64, function() {
		console.log("加载Base64图片数据成功");
		bitmap.save(imgsPath + '/' + name + '.jpg', {
			overwrite: false,
			quality: 60
		}, function(i) {
			// alert('拍照成功');
			//删除原图
			// setTimeout(function(){
			bitmap.clear();
			plus.io.resolveLocalFileSystemURL(imgEntryName, function(entry) {
				console.log('删除原图成功')
				// alert('成功：删除图片');
				entry.remove();
			}, function(e) {
				alert('失败：删除图片失败' + e.message);
			});
			// },1000)
		}, function(e) {
			mui.alert('保存图片失败：' + JSON.stringify(e));
		});
	}, function() {
		mui.alert('加载Base64图片数据失败：' + JSON.stringify(e));
	});
}

4. 用native.js获取 手机内部存储 和 创建文件夹等通用功能

SDRoot = getSDRoot() + '/....';  //...为你要建立的文件
/**
 * 获得sd卡根目录
*/
function getSDRoot() {
	// 导入android.os.Environment类对象
	var environment = plus.android.importClass("android.os.Environment");
	// 判断SD卡是否插入
	if (environment.getExternalStorageState() !== environment.MEDIA_MOUNTED) {
		alert('没有找到SD卡');
		return;
	}
	return environment.getExternalStorageDirectory();
}
        
        
/**
 * 创建文件夹
 * @param {Object} path
*/
function creatFolder(path) {
	var File = plus.android.importClass("java.io.File");
	var fd = new File(path);
	if (!fd.exists()) {
		fd.mkdirs();
		plus.nativeUI.toast("创建成功");
	} else {
		// plus.nativeUI.toast("文件夹已存在");
		console.log("文件夹已存在");
	}
}
    

基本的代码逻辑就是这些了，新接手的项目主要是图片展示上传这部分功能，之前也没用过H5+ mui这些，一点点摸索写的，分享一下希望对大家有所帮助。