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

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

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

### 实现将图片保存到手机相册的功能 在 iOS 前端使用 Vue 框架实现将图片保存到手机相册的功能,可以通过 `plus` 插件来完成。以下是一个详细的实现方法: 1. **检查 `plus` 插件是否存在**:确保在 H5+ 环境下运行,因为 `plus` 是 H5+ 的一部分,通常在 App 中使用。 2. **下载图片**:使用 `plus.downloader.createDownload` 方法下载图片。 3. **保存图片相册**:使用 `plus.gallery.save` 方法保存图片相册。 以下是实现代码: ```javascript function saveImageToAlbum(url) { // 检查plus插件是否存在 if (!window.plus) { alert("当前环境不支持plus插件"); return; } // 显示加载等待提示 plus.nativeUI.showWaiting("加载中..."); // 创建下载任务 var dtask = plus.downloader.createDownload( url, {}, function (d, status) { // 下载完成 if (status == 200) { console.log("下载成功,文件保存在" + d.filename); // 保存相册 plus.gallery.save( d.filename, function () { // 保存成功 plus.nativeUI.closeWaiting(); alert("保存图片相册成功"); }, function () { // 保存失败 plus.nativeUI.closeWaiting(); alert("保存失败"); } ); } else { alert("保存失败,请重试!"); } } ); // 开始下载任务 dtask.start(); } ``` ### 修复 iOS 微信长按图片导致的区域选择问题 在 iOS 的微信中,长按图片可能会导致大面积区域被选中的问题。可以通过以下方法修复: 1. **阻止默认的长按行为**:在图片上添加 `@contextmenu.prevent` 和 `@touchstart` 事件来阻止默认的长按行为。 2. **使用 `user-select` CSS 属性**:设置 `user-select: none;` 来防止文本选择。 ```html <img :src="imageUrl" @contextmenu.prevent @touchstart="handleTouchStart" style="user-select: none;" /> ``` 在 Vue 组件中定义 `handleTouchStart` 方法: ```javascript methods: { handleTouchStart(event) { // 阻止默认的触摸事件 event.preventDefault(); } } ``` 通过上述方法,可以在 iOS 前端使用 Vue 框架实现将图片保存到手机相册的功能,且修复 iOS 微信长按图片导致的区域选择问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值