【示例】访问外部网站将图片下载至本地相册

需求描述

用户上传头像时，本地相册资源不足时。可以通过访问外部网站，下载网站中的图片至本地相册以供使用。

需求分析

1、访问外部网站（例如百度图片），可以借鉴简单的内部浏览器实现；
2、网站的跳转等操作是通过点击来实现的，需要另一种手势实现来触发下载的事件，我们选择长按屏幕事件；
3、下载文件，并保存至本地相册，利用HTML5+的downloader和gallery模块提供的API实现；
4、打开相册，选择下载成功的图片并预览，gallery模块同样提供了相应的API。

根据上述分析，实现上述功能需要HTML5+的运行环境，并且需要mui封装的手势事件。
通过引入mui.js，就可以满足这两点需求。那么问题来了，如何把mui.js加载到外部的网站中？
HTML5+API提供了添加Webview窗口预加载js文件的API，可以在外部HTML中加载本地JS文件。

功能实现

长按选择图片

首先需要判定，长按事件的目标元素节点的是否为img元素。

document.addEventListener("longtap", function(event) {  
    var name = event.target.tagName;  
    if(name === "IMG") {  
        // 下载图片  
    }  
});  

下载图片

其次，确定为img元素后。为了提高用户体验，可以用mui封装的confirm对话框，让用户选择是否下载。
用户确定下载后，创建下载任务并开始。

var downLoader = plus.downloader.createDownload(imgUrl, {  
    method: 'GET',  
    filename: '_downloads/image' + suffix  
}, function(download, status) {  
    var fileName = download.filename;  
    console.log('文件名:' + fileName);  
    console.log('下载状态：' + status);  
});  
downLoader.start();  

为了防止中文文件下载后转码，不被本地相册识别。createDownload()第二个参数中配置的filename，需要对图片截取格式后缀，进行重命名。这里请认真阅读下载任务参数的API。

保存至本地相册

然后，为了方便用户选择，将下载的文件保存到本地相册中。保存完成后，依旧需要提醒用户是否立刻去预览。

plus.gallery.save(fileName, function() {  
    mui.confirm("打开相册", "打开相册？", ["打开", "不看"], function(event) {  
        var gindex = event.index;  
        if(gindex == 0) {  
            plus.gallery.pick(function(file) {  
                mui.toast("你选择了图片：" + file);  
            }, function(error) {  
                console.log(error);  
            }, {  
                filter: 'image'  
            });  
        }  
    });  
});  

创建窗口对象并添加本地JS文件

最后，以百度图片为例，创建一个窗口对象并加载本地的JS文件。

var imageWv = plus.webview.create("http://image.baidu.com/", "image", {  
    top: "44px",  
    bottom: 0  
});  
imageWv.appendJsFile("_www/js/mui.min.js");  
imageWv.appendJsFile("_www/js/downloadImage.js");  
imageWv.show("fade-in");  

本地JS文件会按照顺序进行加载，所以我们是先加载mui.js。

示例效果

源码

附上源码，真机运行即可。