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

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

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

原文地址:https://www.cnblogs.com/xiaoyeya/p/11829133.html

时间: 2024-08-30 07:26:28

前端如何保存页面图片,并在相册中查看?的相关文章

Android将view保存为图片并放在相册中

在Android中,可以将view保存为图片并放在相册中,步骤为 view->bitmap->file,即先将view转化为bitmap,再将bitmap保存到相册中. 需要将红框标注的view转化为图片并保持到相册中.view的XML代码为 <RelativeLayout android:id="@+id/lanjing_code_rl" //要保存的view id android:layout_width="match_parent" andr

iOS 开发: 自定义相册, 保存多张图片到自定义相册中

1.自定义相册(兼容 iOS7 iOS8) - (void)viewDidLoad { //search all photo albums in the library    [assetsLibrary enumerateGroupsWithTypes:ALAssetsGroupAlbum usingBlock:^(ALAssetsGroup *group, BOOL *stop)     {         //compare the names of the albums        

iOS开发中,获取图片之后保存或下载到本地相册中

#pragma mark 先获取本地图片或者网络图片 - (void)saveHeaderImageWith:(NSString *)path { UIImage *img = [UIImage imageWithContentsOfFile:path]; //这里img也可以是从网络获取的图片 [self saveImageToPhotos:img]; } #pragma mark 保存图片 - (void)saveImageToPhotos:(UIImage*)savedImage { UI

vue 使用localStorage保存页面变量到浏览器变量中

const STORAGE_KEY = 'todos-vuejs'//定义常量保存键值 export default{ fetch(){ return JSON.parse(window.localStorage.getItem(STORAGE_KEY)|| '[]'); }, save(items){ window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items)) } }

第三讲 ------- 从系统中选择图片(拍照或从相册中取)

从系统中取图片这个是写安卓非常常见的一个功能,但是很多时候我们每次我们都去写一个还是比较麻烦的. 下面我就介绍我写的一个已经封装好的一个类,先看截图 从截图上看,功能很清晰,点击获取图片按钮,出来一个半透明的界面,具有用相机拍照获取图片和从相册中选择两种途径去获取图片. 看完截图直接上代码 package com.yixuan; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutput

将图片保存到沙盒或者相册

将图片保存到沙盒或者相册: 1.保存到相册: -(void)saveImageToAlbum:(UIButton *)sender{    //将图片保存到相册中    UIImageWriteToSavedPhotosAlbum(self.image, self, @selector(image:didFinishSavingWithError:contextInfo:), nil);} 2.保存到沙盒中 -(void)saveImageToSandBox:(UIButton *)sender

HTML页面保存为图片

方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data URI 方案2:使用html2canvas.js实现(可选搭配Canvas2Image.js实现网页保存为图片) 方案3:使用rasterizeHTML.js实现 原文地址:https://www.cnblogs.com/vicky24k/p/11372092.html

基于html2canvas实现网页保存为图片及图片清晰度优化

本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H5活动页的结尾页分享.以下则是项目中调研和踩坑的一些小结和汇总. 一.实现HTML页面保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data URI 方案2

网页保存为图片及高清截图的优化 | canvas跨域图片配置

本次技术调研来源于H5项目中的一个重要功能需求:实现微信长按网页保存为截图. 这里有个栗子(请用微信打开,长按图片即可保存):3分钟探索你的知识边界 将整个网页保存为图片是一个十分有趣的功能,常见于H5活动页的结尾页分享.以下则是项目中调研和踩坑的一些小结和汇总. 一.实现HTML网页保存为图片 1.1 已知可行方案 现有已知能够实现网页保存为图片的方案包括: 方案1:将DOM改写为canvas,然后利用canvas的toDataURL方法实现将DOM输出为包含图片展示的data URI 方案2