Question

我正在使用Ionic2中的应用，我正在使用＆＃34; cordova-plugin-file-transfer＆＃34;下载图片。感谢（ionic-2-file-transfer-example）：

，代码如下

  downloadImage(image, name) {
      this.platform.ready().then(() => {
        const fileTransfer = new FileTransfer();
        let targetPath; // storage location depends on device type.

        // make sure this is on a device, not an emulation (e.g. chrome tools device mode)
        if(!this.platform.is('cordova')) {
          return false;
        }

        if (this.platform.is('ios')) {
          targetPath = cordova.file.documentsDirectory + name;
        }
        else if(this.platform.is('android')) {
          targetPath = cordova.file.dataDirectory + name;
        }
        else {
          // do nothing, but you could add further types here e.g. windows/blackberry
          return false;
        }

        fileTransfer.download(encodeURI(image), targetPath,
            (result) => {
         //Here i need to load it back
         this.img = targetPath; // <<-- ERROR -> Can't load from device
            },
            (error) => {
     console.log("error: "+error);
            }
        );
      });
    }

它完美运行（图像保存在设备上），问题是，我需要在我的应用中加载这个图像（我存储在我的设备中）。

我在这个cordova库中看到了以下代码：

function readBinaryFile(fileEntry) {
    fileEntry.file(function (file) {
        var reader = new FileReader();

        reader.onloadend = function() {

            console.log("Successful file read: " + this.result);
            // displayFileData(fileEntry.fullPath + ": " + this.result);

            var blob = new Blob([new Uint8Array(this.result)], { type: "image/png" });
            displayImage(blob);
        };

        reader.readAsArrayBuffer(file);

    }, onErrorReadFile);
}

但是，我无法成功使用它（或将其嵌入我的代码中），任何人都知道如何加载我存储的图像并将其推入我的离子代码中：

<img [src]="avatar" style="margin: auto;" alt="Profile">
this.avatar = "???";

谢谢！

Answer 1

以下是一个例子：

1.从此网址下载图片 http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg

 download() {
   var fileTransfer = new Transfer();
   var url = encodeURI("http://s14.postimg.org/i8qvaxyup/bitcoin1.jpg");
   var fileName = "bitcoin.jpg";
   fileTransfer.download(url, cordova.file.dataDirectory + fileName)
     .then((entry)=>{
       console.log('download complete: ' + entry.toURL());
     }, (error) => {
       console.log("error", "Error file transfert");
  });
 }

要测试文件是否已下载，请在终端中运行：

 adb shell
 run-as com.package.name
 cd files
 ls

2.上传图片

加载文件非常简单。在你的类中声明一个变量

myImg: any;

编写方法上传图片（琐碎）：

 upload(){
   var temp = "bitcoin.jpg";
   this.myImg = cordova.file.dataDirectory + temp;
 }

加载图片：

<div>
  <img [src]="myImg"/>
</div>

你可以这样称呼这些方法：

initializeApp() {
  this.platform.ready().then(() => {
   this.download();
   this.upload();
   ...
});

}

我希望这会对你有所帮助！

Answer 2

好的，我发现这个问题有更好的实现，因为Ionic2可以直接将字符串保存到服务器，因此您可以轻松地将其转换为Base64，然后保存到本地存储，结果如下：

<body onload="generateFaces()">
  <h2>Matching Game</h2>
  <p>Click on the extra smiling face on the left.</p>

  <div id="leftSide"></div>
  <div id="rightSide"></div>

然后

getImageBase64String(url: string) {
return new Promise( (resolve, reject) => {

  // Convert image to base64 string
  var canvas = document.createElement('CANVAS'),
    ctx = canvas.getContext('2d'),
    img = new Image;

  img.crossOrigin = 'Anonymous';

  img.onload = () => {
    var dataURL: any = null;
    canvas.height = img.height;
    canvas.width = img.width;
    ctx.drawImage(img, 0, 0);

    // set image quality
    dataURL = canvas.toDataURL('image/jpeg', 0.9);
    canvas = null;
    resolve(dataURL);
  };

  img.onerror = (err) => {
    reject(err);
  };

  img.src = url;
});

}

享受。

Ionic2：使用cordova-file-transfer

2 个答案: