cordova图片下载

我们将介绍两种方式将照片保存到本地

  • 官方下载插件FileTransfer

    这种方式会有一个弊端就是图片在相册里面找不到需要刷新一下系统目录或者重启一下手机才能在相册里面查看到图片但是可以下载动图

      vm.url = encodeURI(baseConfig.imgPath + vm.nowImgs[vm.nowImgIndex]);
      vm.fileName = vm.nowImgs[vm.nowImgIndex].split("/").pop();
      var fileTransfer = new FileTransfer();
      var trustHosts = true;
      var options = {
          headers: {
            "Authorization": 'access_token'
          }
       };
      //Android:
      vm.fileURL = cordova.file.externalRootDirectory;
      window.resolveLocalFileSystemURL(vm.fileURL, function (fileEntry) {
        fileEntry.getDirectory("Giti", {create: true, exclusive: false}, function (fileEntry) {
          fileEntry.getDirectory("img", {create: true, exclusive: false}, function (fileEntry) {
            fileTransfer.download(
              vm.url,
              fileEntry.toURL() + vm.fileName,
              function (success) {
                
              },
              function (error) {
              
              },
              options,
              trustHosts
            );
          }, function () {
            publicMethod.showLoadingNoBackdrop('img文件夹创建失败');
          });
        }, function () {
          publicMethod.showLoadingNoBackdrop('Giti文件夹创建失败');
        });
      });
      // iOS
      vm.fileURL = cordova.file.documentsDirectory + vm.fileName;
      window.requestFileSystem(LocalFileSystem.PERSISTENT, 5 * 1024 * 1024, function (fs) {
        fs.root.getDirectory('Giti', {create: true, exclusive: false}, function (directory) {
          fileTransfer.download(
            vm.url,
            directory.nativeURL + vm.fileName,
            function (success) {
             
            },
            function (error) {
              
            },
            trustHosts,
            options
          );
        });
      });
    
  • Canvas2ImagePlugin插件

    这种方法可以直接在相册里面看到图片但是动图看不到,下面是参考代码

      function keepImg(){
          var success = function (msg) {
          
          };
          var error = function (err) {
          
          };
          saveImageToPhone(vm.url, success, error);
      }
              
      function saveImageToPhone(url, success, error) {
        var canvas, context, imageDataUrl, imageData;
        var img = new Image();
        img.src = url;
        img.onload = function () {
          console.log('Img size: ' + img.naturalWidth + 'x' + img.naturalHeight);
          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;
          console.log("153" + img.src);
        }
        catch (e) {
          console.log("156" + img.src);
          error(e.message);
        }
      }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,842评论 2 17
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,937评论 18 139
  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 2,103评论 1 10
  • 不要看夫妻小小的沟通,那也是一门艺术啊,也要讲究方法,更要把握一个"度"。 一个眼神,一个面目表情,一个肢體語言,...
    一棵樹阅读 250评论 0 0
  • 不知大家有没同感,现在的女朋友呀你得必须得伺候好了,节假日一个逃不掉,可不,又到清明节了,愁呢,带她去哪儿玩呢?正...
    游大大旅游阅读 648评论 0 0