2015-11-19

使用跨平台技术h5+实现应用图片本地缓存

在大哥王（andy）神一样的带领下，我们牛逼闪闪的走上了使用h5plus技术实现跨平台技术开发的道路，一路高歌！！！

下面我要分享的内容是如何实现图片本地缓存。

废话不说，直接看代码：

1. /**
2. *声明获取图片的方法
3.

<span class="pun">*</span><span class="lit">@param</span><span class="pun">{</span><span class="typ">Object</span><span class="pun">}</span><span class="pln"> picUrl </span><span class="pun">图片的网络地址</span>

<span class="pun">*</span><span class="lit">@param</span><span class="pun">{</span><span class="typ">Object</span><span class="pun">}</span><span class="pln"> defaultPic </span><span class="pun">默认图片</span>

<span class="pun">*</span><span class="lit">@param</span><span class="pun">{</span><span class="typ">Object</span><span class="pun">}</span><span class="pln"> element </span><span class="pun">图片源元素</span>

6. */
7.

<span class="kwd">function</span><span class="pln"> fetchImage</span><span class="pun">(</span><span class="pln">picUrl</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">,</span><span class="pln"> element</span><span class="pun">)</span><span class="pun">{</span>

8. //将图片网络地址进行md5摘要。
9.

<span class="pln"> var filename </span><span class="pun">=</span><span class="pln"> hex_md5</span><span class="pun">(</span><span class="pln">picUrl</span><span class="pun">);</span>

10.

<span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">);</span>

11. //尝试加载本地图片
12.

<span class="pln"> plus</span><span class="pun">.</span><span class="pln">io</span><span class="pun">.</span><span class="pln">resolveLocalFileSystemURL</span><span class="pun">(</span><span class="str">"_downloads/"</span><span class="pun">+</span><span class="pln"> filename</span><span class="pun">,</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">entry</span><span class="pun">)</span><span class="pun">{</span>

13. //加载本地图片成功
14.

<span class="pln"> entry</span><span class="pun">.</span><span class="pln">file</span><span class="pun">(</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">file</span><span class="pun">){</span>

15.

<span class="kwd">if</span><span class="pun">(</span><span class="pln">file</span><span class="pun">.</span><span class="pln">size</span><span class="pun">==</span><span class="lit">0</span><span class="pun">){</span>

16.

<span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.1图片为空显示默认"</span><span class="pun">);</span>

17.

<span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">);</span>

18. }else{
19.

<span class="pln"> var path </span><span class="pun">=</span><span class="pln"> plus</span><span class="pun">.</span><span class="pln">io</span><span class="pun">.</span><span class="pln">convertLocalFileSystemURL</span><span class="pun">(</span><span class="str">"_downloads/"</span><span class="pun">+</span><span class="pln"> filename</span><span class="pun">);</span>

20.

<span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.1加载本地图片"</span><span class="pun">+</span><span class="pln">path</span><span class="pun">);</span>

21.

<span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> path</span><span class="pun">);</span>

22. }
23. });
24.

<span class="pun">},</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">e</span><span class="pun">)</span><span class="pun">{</span>

25.

<span class="pun">//加载本地图片失败，本地没有该图片，尝试从网络下载图片并保存本地，保存文件名为</span><span class="pln">url</span><span class="pun">摘要</span><span class="pln">md5</span><span class="pun">值</span>

26.

<span class="pln"> var dtask </span><span class="pun">=</span><span class="pln"> plus</span><span class="pun">.</span><span class="pln">downloader</span><span class="pun">.</span><span class="pln">createDownload</span><span class="pun">(</span><span class="pln">picUrl</span><span class="pun">,</span><span class="pun">{</span><span class="pln">filename</span><span class="pun">:</span><span class="pln">filename</span><span class="pun">},</span><span class="kwd">function</span><span class="pun">(</span><span class="pln">d</span><span class="pun">,</span><span class="pln"> status</span><span class="pun">)</span><span class="pun">{</span>

27. //下载完成
28.

<span class="kwd">if</span><span class="pun">(</span><span class="pln">status </span><span class="pun">==</span><span class="lit">200</span><span class="pun">)</span><span class="pun">{</span>

29.

<span class="kwd">if</span><span class="pun">(</span><span class="pln">d</span><span class="pun">.</span><span class="pln">downloadedSize</span><span class="pun">==</span><span class="lit">0</span><span class="pun">){</span>

30.

<span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.2图片为空显示默认"</span><span class="pun">);</span>

31.

<span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> defaultPic</span><span class="pun">);</span>

32. }else{
33.

<span class="pun">//</span><span class="pln">console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">"2.2下载网络文件成功"</span><span class="pun">+</span><span class="pln">d</span><span class="pun">.</span><span class="pln">url</span><span class="pun">);</span>

34.

<span class="pln"> element</span><span class="pun">.</span><span class="pln">setAttribute</span><span class="pun">(</span><span class="str">"src"</span><span class="pun">,</span><span class="pln"> d</span><span class="pun">.</span><span class="pln">url</span><span class="pun">);</span>

35. }
36. }
37. });
38.  dtask.start();
39. });
40. }

以上主要用到h5plus的两个重要的api

1.Downloader模块管理网络文件下载任务，用于从服务器下载各种文件，并支持跨域访问操作。

详见官方：http://www.html5plus.org/doc/zh_cn/downloader.html

2.IO模块管理本地文件系统，用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。

详见官方：

http://www.html5plus.org/doc/zh_cn/io.html

刚开始做的时候准备使用html5的indexedDB存储图片来的，但是后来发现在移动设备上不好用。参考https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

来自为知笔记(Wiz)

程序员皮皮

打造高可用架构

使用跨平台技术h5+实现应用图片本地缓存