Hbuilder 中的 坑

1.使用拍照上传

function takePhoto(){
	var photonum = jQuery('#photonum').val();
	if(isNotNull(photonum) && photonum >=9){
		mui.alert('最多选择9张照片');
	}else{
		var cmr = plus.camera.getCamera();
		cmr.captureImage( function ( p ) {
			plus.io.resolveLocalFileSystemURL( p, function ( entry ) {
				createItem( entry );
			}, function ( e ) {
			} );
		}, function ( e ) {
		}, {filename:"_doc/camera/",index:1} );
	}
}
function createItem( entry ) {
	compressImage(entry.toLocalURL(),'20');
}

//压缩图片,并拼接显示

function compressImage(path,qa){
	var parent_file_path = path.substring(0,path.lastIndexOf('/')+1);
	var file_name = path.substring(path.lastIndexOf('/')+1,path.length);
	var file_pure_name = file_name.substring(0,file_name.indexOf('.'));
	var file_type = file_name.substring(file_name.indexOf('.'));
	var random_num = createRandomNumber();
	var file_compress_name = parent_file_path+random_num+file_type ;
	plus.zip.compressImage({
			src:path,
			dst:file_compress_name,//为了不和原来的路径重复,给dst参数设置另外的保存路径
			quality:qa,
			overwrite:true
		},
		function() {
			var appendPicHtml = '';
			appendPicHtml+='<li class="per33 fl tc ht96 pt8 mb6">';
			appendPicHtml+='<div class="display-ib l-ht0 overflow-h per95 tc ht96">';
			appendPicHtml+='<img style="transform: scale(2);-webkit-transform: scale(2);" class="per100 vertical-a-m uploadimg" src="'+file_compress_name+'" />';
			appendPicHtml+='</div>';
			appendPicHtml+='</li>';
			jQuery('#picUl').prepend(appendPicHtml);
			var photonum = jQuery('#photonum').val();
			if(isNotNull(photonum)){
				photonum = parseInt(photonum)+1;
			}else{
				photonum = 1;
			}
			jQuery('#photonum').val(photonum);
			if(photonum >= 9 ){
				jQuery('#uploadPic').hide();
			}			 
			 
		},function(error) {
	});
}

这样是没有问题.
2.但是如果从相册选择多张图片时
// 从相册中选择图片

	    plus.gallery.pick( function(e){
			var appendPicHtml = '';
			var last_length = 0 ;
			var curr_length = e.files.length ;
			var curr_all_num = parseInt(curr_length) + parseInt(already_photo_length) ;
			if(curr_all_num <= 9){
				last_length = e.files.length ;
			}else{
				last_length = 9-already_photo_length ;
			}
			if(curr_all_num >= 9){
				jQuery('#uploadPic').hide();
			}		
			compressImageForChoosePic(e,last_length,'20',curr_all_num);		
	    }, function ( e ) {
	    },{filter:"image",multiple:true,maximum:9,system:false,onmaxed:function(){
			plus.nativeUI.alert('最多只能选择9张图片');
	    }});

把选择到的图片集传入到compressImageForChoosePic()方法中.首先我是这样处理,在成功回调函数中把压缩之后的产生的新文件拼接到html片段中

function compressImageForChoosePic(e,last_length,qa,curr_all_num){
	var  appendPicHtml = '';
	for(var i =0;i<last_length;i++){
		var path = e.files[i];
		var parent_file_path = path.substring(0,path.lastIndexOf('/')+1);
		var file_name = path.substring(path.lastIndexOf('/')+1,path.length);
		var file_pure_name = file_name.substring(0,file_name.indexOf('.'));
		var file_type = file_name.substring(file_name.indexOf('.'));
		var random_num = createRandomNumber();
		var file_compress_name = parent_file_path+random_num+file_type ;
		plus.zip.compressImage({
				src:path,
				dst:file_compress_name,
				quality:qa,
				overwrite:true
			},
			function() {
				appendPicHtml+='<li class="per33 fl tc ht96 pt8 mb6">';
				appendPicHtml+='<div class="display-ib l-ht0 overflow-h per95 tc ht96">';
				appendPicHtml+='<img style="transform: scale(2);-webkit-transform: scale(2);" class="per100 vertical-a-m uploadimg" src="'+file_compress_name+'" />';
				appendPicHtml+='</div>';
				appendPicHtml+='</li>';	
			},function(error) {
		});
	}
	console.log(appendPicHtml);
	jQuery('#picUl').prepend(appendPicHtml);
	jQuery('#photonum').val(curr_all_num);	
}

// 这样按照正常的逻辑来看,应该是得到多个li组成的html片段,每个li的img src不同,但是结果是不论怎么试,返回的 file_compress_name 一直都是最后一个,不会改变.
后来我考虑把每次产生的 file_compress_name 保存在数组中,压缩完成后来循环数组来获取压缩的结果路径.
这样实现:

function compressImageForChoosePic(e,last_length,qa,curr_all_num){
	var picCompressPathChooseFromDCIM = new Array() ;
	for(var i =0;i<last_length;i++){
		var path = e.files[i];
		var parent_file_path = path.substring(0,path.lastIndexOf('/')+1);
		var file_name = path.substring(path.lastIndexOf('/')+1,path.length);
		var file_pure_name = file_name.substring(0,file_name.indexOf('.'));
		var file_type = file_name.substring(file_name.indexOf('.'));
		var random_num = createRandomNumber();
		var file_compress_name = parent_file_path+random_num+file_type ;
		plus.zip.compressImage({
				src:path,
				dst:path,
				quality:qa,
				overwrite:true
			},
			function() {
				picCompressPathChooseFromDCIM.push(path);
			},function(error) {
		});
	}
//	setTimeout(function (){
//		for(var k=0;k<e.files.length;k++){
//			console.log(e.files[k]+'数组');
//		}
//	},5000);
	var  appendPicHtml = '';
//	setTimeout(function (){
		for(var k =0 ;k<picCompressPathChooseFromDCIM.length;k++){
			appendPicHtml+='<li class="per33 fl tc ht96 pt8 mb6">';
			appendPicHtml+='<div class="display-ib l-ht0 overflow-h per95 tc ht96">';
			appendPicHtml+='<img style="transform: scale(2);-webkit-transform: scale(2);" class="per100 vertical-a-m uploadimg" src="'+picCompressPathChooseFromDCIM[k]+'" />';
			appendPicHtml+='</div>';
			appendPicHtml+='</li>';	
		}
//	},5000);
	console.log(appendPicHtml);
	jQuery('#picUl').prepend(appendPicHtml);
	jQuery('#photonum').val(curr_all_num);	
}

然并卵,后来发现不管怎么调,根本就不会进到 picCompressPathChooseFromDCIM 的循环中,后来发现是js异步执行.上边循环压缩的过程还没有完成,
下边从 picCompressPathChooseFromDCIM 中循环取值的逻辑已经开始.所以取不到,好,加了一个延迟执行,setTimeout 5s 以后执行.暂且不管合不合理,
现在是可以从 picCompressPathChooseFromDCIM 中取到值了,但是,打出来之后发现,还是完全一样的路径,应该还是最后一个压缩图片的途径.
说明一下,要改变图片压缩之后的路径的原因:1>,为了避免压缩之后的图片对之前的原图片进行覆盖.2>,有些类型截屏之类的图片名字中包含有文字,
放到li的img src之后没有问题,但是后来使用 jQuery.each()来获取的时候,默认是经过了encode编码,所以上传的时候,压缩之后路径和压缩之前的从字面
来看字符串是不相同的,所以造成,选择之后可以在拼接的页面中显示,但是不能上传,因为找不到该图片.
3.没招了,就不再修改压缩路径,但是图片中文名字还得解决,在从each中获取的时候,直接使用decodeURL来解码,就可以了.
但是压缩还是得做,就用了相同的路径,即:
plus.zip.compressImage({
src:path,
dst:file_compress_name,
quality:qa,
overwrite:true
},
中的 src:和dst:相同.


问题:1.为什么从相册中选择多张图片之后,得到的压缩路径最终会是一个?
2.我现在使用的是源路径和目标路径相同,这样,压缩之后,是否会将源图片文件给覆盖?我尝试过修改 overwrite 属性值为:false,好像不成功,会报错.

mark.