美文网首页Ionic 2 花瓣 ..
cordova保存图片到相册

cordova保存图片到相册

作者: 待花谢花开 | 来源:发表于2017-06-15 09:07 被阅读15次

将图片保存到相册的三种方式:
一、文件操作
有三个参数:
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);
    }
  })

相关文章

网友评论

    本文标题:cordova保存图片到相册

    本文链接:https://www.haomeiwen.com/subject/zqdyqxtx.html