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

需求描述

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

需求分析

1、访问外部网站(例如百度图片),可以借鉴简单的内部浏览器实现;
2、网站的跳转等操作是通过点击来实现的,需要另一种手势实现来触发下载的事件,我们选择长按屏幕事件;
3、下载文件,并保存至本地相册,利用HTML5+的downloadergallery模块提供的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。

示例效果

源码

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

18 分享 关注
amourz BirdZhang 周羊羊 贺兵强 赵梦欢 705706096@qq.com 737516596@qq.com beisong Magxl leoeacda 1156565863@qq.com julang200@qq.com 314779559@qq.com qqzw89757@163.com wdailichun@163.com miao3760@126.com 497136228@qq.com jinsheng
苛学加

苛学加

mark
0 赞 2018-12-27 18:00
zhongpei

zhongpei

为什么加载本地JS文件会比加载远程文件 还晚执行,
webview.appendJsFile("_www/js/app.js"); 总是在最后执行,加载远程DOM加载完后才执行。

webview.evalJS('console.log("local- token");');
webview.show("slide-in-right");

远程HTML:
console.log("token" );

控制台最终输出:
token
local- token
0 赞 2018-12-26 20:14
hsnndly@163.com

hsnndly@163.com

plus.gallery.save 兼容性有问题,谨慎使用

在小米 MIX2S 上调用正常

在 小米4上调用报错
{"code":12,"message":"UNKOWN ERROR"}
0 赞 2018-11-12 12:12
jtshushu

jtshushu

在文件搜索器中能看到图片吗?
0 赞 2018-09-05 11:58
497136228@qq.com

497136228@qq.com

怎么我下载下来是html
0 赞 2018-07-12 16:21
kistliu@126.com

kistliu@126.com 回复 我已无力吐槽

这个有解决么?
0 赞 2018-06-09 21:47
我已无力吐槽

我已无力吐槽

ios为什么现在下载不了, plus.downloader.createDownload 无反应
0 赞 2018-04-20 10:08
阿星蜀黍

阿星蜀黍

马克
0 赞 2018-04-10 09:58
tpu@qq.com

tpu@qq.com

这个如何放在 wap2app里的网页中呢?
0 赞 2018-04-08 11:43
1910563900@qq.com

1910563900@qq.com

可以识别到图片,但是下载400
0 赞 2018-01-12 12:12
1910563900@qq.com

1910563900@qq.com

为什么有的图片下载不了
0 赞 2018-01-12 12:12
664024627@qq.com

664024627@qq.com

ios系统好像用不了?
0 赞 2018-01-06 16:38
lhk1025@sina.com

lhk1025@sina.com

dataurl的图片无法下载
0 赞 2017-10-26 16:45
诗小柒

诗小柒

mark
0 赞 2017-09-30 17:40
58468459@qq.com

58468459@qq.com

mark
0 赞 2017-09-18 18:17
314779559@qq.com

314779559@qq.com

为什么没有关注功能呢?
0 赞 2017-09-18 11:16
julang200@qq.com

julang200@qq.com

额,刚刚下了程序,在ios环境长按图片好像没效果?
0 赞 2017-05-06 22:49
小朵

小朵

mark
0 赞 2017-03-21 10:47
Magxl

Magxl

逻辑简单,代码清晰,读不懂这个,那就别搞这功能了,好好学基础知识,反正我先去学了....
2 赞 2017-02-23 14:23
成都H5

成都H5

你这图片地址 是本地的 怎么转换成网络地址的
0 赞 2016-11-24 18:11
WinXP

WinXP

mark
0 赞 2016-11-17 12:46
2517320453@qq.com

2517320453@qq.com

下载的图片地址 与相册选择的同一张图片 如何对应
0 赞 2016-09-20 18:05
邓尼玛_

邓尼玛_

赞一个
0 赞 2016-08-24 11:03
周羊羊

周羊羊

mark一下 为什么文章没有收藏功能_(:зゝ∠)_
0 赞 2016-08-04 18:58

要回复文章请先登录注册