hybird读取android系统图片显示在html中

发表于

在html中读取图片资源，一般要使用img标签的src属性，或者用于填充div的背景，使图片显示出来，此时要设置background样式的url属性。
一般情况下，src属性值或者url属性值，都为一个路径可访问的资源链接，如：http:xxx.com/xxx.jpg，或者当前项目里的图片资源，如：../xxx.jpg。
而，当在android应用中，拍完的照片存储在某一个路径，如com.xxx/下时，使用后者是访问不到的，这就需要我们借助其他方式去读取当前照片。
一般的思路是先找到路径com.xxx，获取到当前图片，然后把其路径赋值为src属性或者url属性，但是在android系统中，得到的路径在html中是找不到的。
下面，换个思路，先找到图片，然后把其资源以base64读出来，然后拿到这串base64字符串，就可以直接赋值给src属性或者url属性，以下借助cordova的文件系统插件来实现。

首先，了解cordova框架及如何新建hybird工程、包括如何打包发布；

假使你已经知道如何使用cordova，接下来的步骤如下：

添加插件
1
2
3
4
5
6
7
使用以下命令添加有关文件系统插件
cordova plugin add cordova-plugin-file
cordova plugin add cordova-plugin-file-transfer
插件具体用途,请自行查阅,主要是结合h5文件系统相关的封装
可以使用cordova plugin命令查看安装的插件,及版本信息
使用插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
注意：由于js是单线程执行,因此需要考虑异步读取照片.
// 以下代码,readDir表示成功请求文件系统回调函数,会传入文件系统对象作为参数,error表示请求失败回调函数,需要在调用之前定义,否则找不到指定的方法;
if (window.plugins) {
	window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, readDir, error);
}
// 以下代码,用于获取指定的Directory对象,create:false表示如果不存在,不新建,设置为true表示如果不存在,新建当前目录.readFile表示成功回调,会传入当前找到的Directory对象作为参数,error表示失败回调
// readFile及error同样需要提前定义,否则找不到指定的方法;
var readDir = function (fileSystem) {
	fileSystem.root.getDirectory('com.xxxx', {
		create   : false,
		exclusive: false
	}, readFile, error);
};
// 以下代码用于读取目录下的jpg文件，读取到的jpg文件先添加到事先定义的imgEntry数组中，此时，imgEntry里面存放着多个entry，通过事先定义好的readPic方法,进行读取资源
var imgEntry = [];
var readFile = function (entry) {
	var dirReader = entry.createReader();
	// Call the reader.readEntries() until no more results are returned.
	var readEntries = function () {
		dirReader.readEntries(function (results) {
			for (var i = 0; i < results.length; i++) {
				if (results[i].name.indexOf('jpg') > 0) {
					imgEntry.push(results[i]);
				}
			}
			// 依次读取照片entry
			readPic();
		}, error);
	};
	readEntries(); // Start reading dirs.
};
// 以下代码，用imgList数组来存放h5中需要读取的图片数组，其对象中的src属性存放，src属性值或者url值
// 具体思路是，如果imgEntry里面有值，取出第一个，然后用entry.file方法，去解析fileEntry,解析成功，拿到file对象，再通过FileReader去读取当前file对象
// onload方法表示读取完成，此时结果里存放的是base64的图片资源字符串，将其保存下来
// 注意：之所以每次只读取一个entry，并且在解析完成后，再读取下一张，是因为entry.file和fr.onload方法都是异步处理，必须成功读取完一张照片，再读取下一张，而不是直接用for去遍历imgEntry读取
imgList = [];
var readPic = function () {
	if (imgEntry && imgEntry.length) {
		var entry = imgEntry.shift();
		entry.file(function (file) {
			var fr = new FileReader();
			fr.onload = function () {
				imgList.push({name: file.name, src: this.result});
				if (imgEntry.length) {
					readPic();
				}
			};
			fr.readAsDataURL(file);
		}, error);
	}
};
整个过程执行完，可以用imgList[i].src让某个div或者img显示照片

money☜☜☜ wechat 『『『 reward 点击扫码打赏 ~~~ ^_^ 』』』alipay ☞☞☞ money