Question

我正在编写一个离子2应用程序，并希望缓存图像。

经过长时间网上搜索后，我发现了以下内容： https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e

https://github.com/chrisben/imgcache.js/blob/master/js/imgcache.js

我实现了给定的解决方案，但是我发现ImgCache模块没有按预期运行 - 永远不会调用ImgCache.isCached回调。

在离子2中缓存图像的任何想法或其他好的解决方案？

========更新==========

这是我使用的指令代码：

import { Directive, ElementRef, Input } from '@angular/core';

import ImgCache from 'imgcache.js';

@Directive({
  selector: '[image-cache]'
})
export class ImageCacheDirective {
  constructor (
    private el: ElementRef
  ) {
    // init
  }

  ngOnInit() {
    // This message is shown in console
    console.log('ImageCacheDirective *** ngOnInit: ', this.el.nativeElement.src);

    this.el.nativeElement.crossOrigin = "Anonymous"; // CORS enabling

    ImgCache.isCached(this.el.nativeElement.src, (path: string, success: any) => {
      // These message are never printed
      console.log('path - '+ path);
      console.log('success - '+ success);

      if (success) {
        // already cached
        console.log('already cached so using cached');

        ImgCache.useCachedFile(this.el.nativeElement);
      } else {
        // not there, need to cache the image
        console.log('not there, need to cache the image - ' + this.el.nativeElement.src);

        ImgCache.cacheFile(this.el.nativeElement.src, () => {
          console.log('cached file');

          // ImgCache.useCachedFile(el.nativeElement);
        });
      }
    });
  }
}

在 app.nodule.es 我这样做：

import { ImageCacheDirective } from '../components/image-cache-directive/image-cache-directive';

然后在home.html中：

<img src="http://localhost/ionic-test/img/timeimg.php" image-cache>

Answer 1

现在已经很晚了，但可能这就是解决方案：

<强> 1。安装cordova FileTransfer：

ionic plugin add cordova-plugin-file-transfer --save

<强> 2。当cordova的deviceready事件触发时启动ImgCache 。在src / app / app.component.ts中添加这些方法（或将它们与initializeApp（）方法集成 - 此方法提供默认项目启动）：

initImgCache() {
    // activated debug mode
    ImgCache.options.debug = true;
    ImgCache.options.chromeQuota = 100 * 1024 * 1024; // 100 MB
    ImgCache.init(() => { },
        () => { console.log('ImgCache init: error! Check the log for errors'); });
}

initializeApp() {
    this.platform.ready().then(() => {
        this.initImgCache();

        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        StatusBar.styleDefault();
        Splashscreen.hide();
    });
}

Answer 2

另一种选择是使用离子专用缓存管理器。而不是自己实现一切。

以下是2个选项： 1.通用缓存实现：https://github.com/Nodonisko/ionic-cache 2.这个更适合图像：https://github.com/BenBBear/ionic-cache-src

编辑：这不是一个“仅链接”的答案..它告诉用户使用现成的实现而不是尝试从头开始实现。

离子2缓存图像

2 个答案: