离子2缓存图像

Question

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

后在网络上长期搜索，我发现这些引用： https://gist.github.com/ozexpert/d95677e1fe044e6173ef59840c9c484e

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

我实现给定的解决方案，但我认为这是预期ImgCache模块不表现 - 的ImgCache.isCached回调从未打过电话

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

======== UPDATE ==========

这里是指令代码，我使用：

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.安装科尔多瓦文件传输：

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

2.初始化ImgCache时科尔多瓦火灾的deviceready事件。在SRC /应用/ 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

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