【Cordova】「imgcache.js」でキャッシュした画像のパスを取得する方法

村上 著者:村上

【Cordova】「imgcache.js」でキャッシュした画像のパスを取得する方法

以前に紹介した、画像をキャッシュするライブラリ imgcache.js で、キャッシュした画像のURLを取得する方法についてです。
前回の記事を投稿した時点では「WARN: No source given to getCachedFileName INFO: File undefined not in cache」というエラーが発生して画像が取得できなかったのですが、ようやく取得方法がわかりました。

なお、以前の記事はこちら。

【Cordova】アプリで表示する画像を「imgcache.js」を使ってキャッシュする
https://cpoint-lab.co.jp/article/201910/12435/

ライブラリのインストールから、画像をキャッシュに保存するまでの手順を紹介しています。

 

で、方法ですが、.getCachedFileURL() メソッドを使いました。
こちらは、キャッシュした画像の URL を取得できます。
サンプルコードはこちら。

ImgCache.isCached([キャッシュしたい画像のURL], function(path, success) {
  if (success) {
    ImgCache.getCachedFileURL(path, function(originalUrl, cacheUrl) {
      // 任意の処理を実行
      // cacheUrl にキャッシュした画像のURLが代入されている
    }, function(error) {
      console.log(error);
    });
  } else {
    ImgCache.cacheFile(path, function () {
      ImgCache.getCachedFileURL(path, function(originalUrl, cacheUrl) {
        // 任意の処理を実行
        // cacheUrl にキャッシュした画像のURLが代入されている
      }, function(error) {
        console.log(error);
      });
    });
  }
});

まず 1行目で、画像がキャッシュ済みかを調べます。
結果は success に格納され、キャッシュ済みだったら、3行目で画像のパスを取得しています。
コメントにも記載している通り、cacheUrl にキャッシュした画像のパスが保存されているので、そちらを使って任意の処理を実行してください。
なお、pathoriginalUrl には、キャッシュされる前のオリジナルのURLが格納されています。
指定した画像がまだキャッシュされていなかった場合は、10行目で画像をキャッシュし、11行目でキャッシュした画像の URL を取得しています。
処理としては以上です!

私の環境では .useCachedFile() メソッドが動作しなかったのと、キャッシュされた画像の URL を取得できた方が処理的にも便利だったので、 .getCachedFileURL() を使いました。

 

また、前回の記事で「node_modules > imgcache ディレクトリ内にある imgcache.js を任意の場所にコピーし、それをインポートします。」と書きましたが、よくよく確認したところ、node_modules 内の imgcache ライブラリのディレクトリの名前が imgcache.js になっていました。
こちらを imgcache に変更し、import ImgCache from 'imgcache'; と指定したところ、問題なくインポートできましたので、ご参考いただければと思います。
ディレクトリ名に拡張子が入ってしまっていたせいで、正常に読み込めなかったんですね…。

 

以上、imgcache.js を使ってキャッシュした画像の URL を取得する方法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)

著者について

村上

村上 administrator