cordova保存图片到相册

将图片保存到相册的三种方式:
一、文件操作
有三个参数:
1)URL
2)文件夹名称你想在你的SD卡的创建
3)文件名称(你可以给任何名称的文件)

所有类型的文件可以通过使用此代码下载。
//第一步检查参数和网络转态
function DownloadFile(URL, Folder_Name, File_Name) {
if (URL == null && Folder_Name == null && File_Name == null) {
return;
}
else {
var networkState = navigator.connection.type;
if (networkState == Connection.NONE) {
return;
} else {
download(URL, Folder_Name, File_Name);
}
}
}
/ /第二步得到写权限和创建文件夹
function download(URL, Folder_Name, File_Name) {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);
function fileSystemSuccess(fileSystem) {
var download_link = encodeURI(URL);
ext = download_link.substr(download_link.lastIndexOf(‘.’) + 1);
var directoryEntry = fileSystem.root; // to get root path of directory
directoryEntry.getDirectory(Folder_Name, { create: true, exclusive: false }, onDirectorySuccess, onDirectoryFail);
var rootdir = fileSystem.root;
var fp = rootdir.fullPath;
fp = fp + “/” + Folder_Name + “/” + File_Name + “.” + ext;
// download function call
filetransfer(download_link, fp);
}

function onDirectorySuccess(parent) {
// Directory created successfuly
}

function onDirectoryFail(error) {
//Error while creating directory
alert(“Unable to create new directory: ” + error.code);
}

function fileSystemFail(evt) {
//Unable to access file system
alert(evt.target.error.code);
}
}
/ /第三步下载文件到创建文件夹

function filetransfer(download_link, fp) {
var fileTransfer = new FileTransfer();
fileTransfer.download(download_link, fp,
function (entry) {
alert(“download complete: ” + entry.fullPath);
},
function (error) {
//Download abort errors or download failed errors
alert(“download error source ” + error.source);
//alert(“download error target ” + error.target);
//alert(“upload error code” + error.code);
}
);
}
二、使用PhoneGap的file插件(此种方式下载的在安卓上面下载完成后看不到图片需要重启手机才能看到,不推荐使用)

 var url = 'http://image_url';
    var filePath = 'local/path/to/your/file';
    var fileTransfer = new FileTransfer();
    var uri = encodeURI(url);
    fileTransfer.download(
        uri,
        filePath,
        function(entry) {
            console.log("download complete: " + entry.fullPath);
        },
        function(error) {
            console.log("download error source " + error.source);
            console.log("download error target " + error.target);
            console.log("upload error code" + error.code);
        },
        false,
        {
            headers: {
            }
        }
    );

三、使用Canvas2ImagePlugin(推荐使用)
cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git

    $scope.downPhoto = function (photoPath) {
      var pictrueUrl = encodeURI(photoPath);

      function saveImageToPhone(url, success, error) {
        var canvas, context, imageDataUrl, imageData;
        var img = new Image();
        img.onload = function () {
          canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          context = canvas.getContext('2d');
          context.drawImage(img, 0, 0);
          try {
            imageDataUrl = canvas.toDataURL('image/jpeg', 1.0);
            imageData = imageDataUrl.replace(/data:image\/jpeg;base64,/, '');
            cordova.exec(
              success,
              error,
              'Canvas2ImagePlugin',
              'saveImageDataToLibrary',
              [imageData]
            );
          }
          catch (e) {
            error(e.message);
          }
        };
        try {
          img.src = url;
        }
        catch (e) {
          error(e.message);
        }
      }

      var success = function (msg) {
      //下载成功
      };
      var error = function (err) {
       //下载失败
      };
      saveImageToPhone(photoPath, success, error);
    }
  })
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保存图片到手机相册的基本步骤。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值