以前に紹介した、画像をキャッシュするライブラリ 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 にキャッシュした画像のパスが保存されているので、そちらを使って任意の処理を実行してください。
なお、path と originalUrl には、キャッシュされる前のオリジナルの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 を取得する方法でした。
ご参考になれば幸いです。
