cordova Vue 保存视频/图片到相册 - 实现下载视频/图片到相册

cordova实现保存视频到相册功能
亲测可用*(支持安卓,ios; 目前看来ios14都是可以的;没有兼容问题;) *

需要使用到插件

1、文件系统插件 https://github.com/apache/cordova-plugin-file-transfer
2、 cordova-plugin-add-swift-support@2.0.2
3、cordova-plugin-photo-library(有问题可以去GitHub查看 issues https://github.com/terikon/cordova-plugin-photo-library)

注意事项:

1)三个插件都需安装,可依次安装;
2)安装插件 cordova plugin add xxx (最好名称安装,名称安装不成功在尝试url, 例如 cordova plugin add https://github.com/nilebma/cordova-plugin-photo-library.git;如果再不行 可查看问题 尝试–force强制安装)
3)安装之后可以查看是否安装成功 cordova plugins list

完整代码

/*
* url: 视频源地址
* album: 视频名称
* success:成功回调
* error: 失败回调
* library: 请求相册权限失败回调
*/
function saveVideoToPhotoLibrary(url, album, success, error, library) {
    let fileURL = cordova.file.dataDirectory + album + '.mp4'; // 可改为指定路径
    let fileTransfer = new FileTransfer();
    let uri = encodeURI(url);
        fileTransfer.download(uri,fileURL, (entry) => {
            cordova.plugins.photoLibrary.requestAuthorization(() => {
                    // User gave us permission to his library, retry reading it!
                    cordova.plugins.photoLibrary.saveVideo(entry.toURL(), album, success, error);
                }, library, {
                    read: true,
                    write: true
                });
        }, error);
}

总结 :
下载图片只需要 cordova.plugins.photoLibrary.saveImage 即可,但是下载视频需要先保存文件到本地,才能保存到相册
所以需要先fileTransfer.download到本地,然后才能保存到相册cordova.plugins.photoLibrary.saveVideo;
并且 iOS 保存视频对格式有要求,提供的视频不能是.webm。使用.mov或.mp4。

注意事项:

在测试时,xcode可能会遇到这个报错 SWIFT_VERSION ‘3.0’ is unsupported, supported versions are: 4.0, 4.2, 5.0.
解决方法:
1.Xcode升级到最新版(在App Store中更新)
2.在Xcode的黄色警告栏(若有)点击-BulidSetting-搜swift-Swift Language Version 改为支持
3.把项目中的一些SwiftLanguage Version 修改

现在可能部分安卓下载到相册,视频名称可能会改变。如果严格的话可能会需要你自己在钻研一下,加油!

提示:遇到问题,你可以留言我或者去GitHub查看issues;

参考文章:(你也可以去看看哦)
1、https://zhuanlan.zhihu.com/p/64729747
2、https://github.com/terikon/cordova-plugin-photo-library
3、https://www.jianshu.com/p/3fffcc4d033c?utm_campaign=haruki&utm_content=note&utm_medium=reader_share&utm_source=weixin

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个开源的前端JavaScript框架,用于构建现代化的Web应用程序。在Vue.js保存图片到手机相册需要使用HTML5的File API和Cordova插件。具体步骤如下: 1. 安装Cordova插件 使用Vue CLI创建Vue.js项目后,需要安装cordova插件,运行以下命令: ``` npm install --save cordova-plugin-file cordova-plugin-file-transfer cordova-plugin-camera ``` 2. 加载Cordova插件 安装好插件后,在Vue.js加载cordova插件。在main.js添加以下代码: ```javascript document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { console.log("Device ready, Cordova plugins loaded."); } ``` 3. 获取图片文件 使用HTML5的File API选择用户想要保存图片文件,并将其转换为base64编码。以下是代码示例: ```javascript // 获取图片文件 var file = this.$refs.imageInput.files[0]; // 将文件转换为base64编码 var reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = function () { var base64 = reader.result; } ``` 4. 保存图片相册 使用Cordova插件将base64编码的图片保存到手机相册。以下是代码示例: ```javascript // 保存图片相册 var filePath = "file:///storage/emulated/0/Download/image.jpg"; var fileTransfer = new FileTransfer(); fileTransfer.download( base64, filePath, function(entry) { console.log("Image saved: " + entry.toURL()); alert("Image saved successfully!"); }, function(error) { console.log("Image save error: " + error.code + ":" + error.source + ":" + error.target); alert("Image save error: " + error.code); } ); ``` 在以上代码示例,base64是图像文件,filePath是要保存到的路径,fileTransfer.download()方法将base64编码的图像文件下载到filePath指定的位置,保存到手机相册。 综上所述,以上是Vue.js保存图片到手机相册的基本步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值