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

作者:小俞儿 更新于： 2020-03-07 11:06:04

　　前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

　　第一次接触混合开发，然后碰到了很多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()方法将保存到手机系统文件夹里面的图片复制粘贴到手机图库，方便查看。

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

　　前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及Javascript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。