前端如何保存页面图片，并在相册中查看？

时间：2019-11-10 12:03:54 收藏：0 阅读：126

第一次接触混合开发，然后碰到了很多H5+api，调用手机相册，扫码，保存图片等。做技术的注定了要终生学习，但学无止境，我们不可能把所有的知识技能都学完了，学精通了再去工作，我们需要在工作中去提升自己，在工作红去总结去成长。

我项目是用mui加H5+去开发的，所以在调用H5+的api时要等plusready事件发生后才能正常使用。

mui.plusReady(function(){
     //在这里面写你所调用的api
    plus.downloader.createDownload(url, options, completedCB);
    //url：必选， 要下载文件的url地址，仅支持网络资源地址，支持http或https协议
    //option：可选 
    //completedCB：可选， 下载完成时触发，不管成功或者失败都会触发此回调
    completedCB(download,status){}
    //download:必选，下载任务对象
    //status：必选 ，下载结果状态码，下载成功status=200
    //以上保存图片成功但是并未保存到图库
    plus.gallery.save( path, successCB, errorCB );此方法将图片保存到图库
    //path：必选，保存到相册中的文件地址
    //successCB：必选，保存成功后的回调
    //errorCB：可选，保存失败后的回调
});
//以上是一个简短的文档，如果需要详细的了解学习，请看H5+api，点击即可www.html5plus.org/doc/h5p.html
//以下为完整代码
mui.plusReady(function(){
    plus.downloader.createDownload(url, {}, function(download,status){
        if(status=200){
            plus.gallery.save( download.filename, function(){
                plus.nativeUI.toast("保存成功");
            }, function(){
                 plus.nativeUI.toast("保存失败");
            });
        }else{
            plus.nativeUI.toast("下载失败");
        }
    });
});

一般这两个方法结合使用，我的理解是创建一个下载任务，将网络地址图片下载到本地，然后利用plus.gallery.sava()方法将保存到手机系统文件夹里面的图片复制粘贴到手机图库，方便查看。

一个来自刚进入前端小白的工作总结，不喜勿喷，如有不对的地方还请指出！