|
|
@ -1,21 +1,28 @@
|
|
|
|
import { blobMd5 } from "../Common/MD5";
|
|
|
|
import { blobMd5 } from "../Common/MD5";
|
|
|
|
|
|
|
|
import { IndexedDbStore, StoreName } from "../IndexedDb/IndexedDbStore";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//节点缓存.使用它来缓存已经加载的图片.
|
|
|
|
|
|
|
|
let imageCache = new Map<string, HTMLImageElement>();
|
|
|
|
|
|
|
|
|
|
|
|
//根据blob文件加载image
|
|
|
|
//根据blob文件加载image
|
|
|
|
function loaderImage(blob: File): Promise<HTMLImageElement>
|
|
|
|
export function loaderImage(blob: File): Promise<HTMLImageElement>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
return new Promise<HTMLImageElement>(async (res, rej) =>
|
|
|
|
return new Promise<HTMLImageElement>(async (res, rej) =>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
let md5 = await blobMd5(blob);
|
|
|
|
let md5 = await blobMd5(blob);
|
|
|
|
console.log('md5: ', md5);
|
|
|
|
if (imageCache.has(md5))
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
res(imageCache.get(md5));
|
|
|
|
|
|
|
|
return;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
(await IndexedDbStore.CADStore()).Put(StoreName.Texture, md5, blob);
|
|
|
|
|
|
|
|
|
|
|
|
let url = URL.createObjectURL(blob);
|
|
|
|
let url = URL.createObjectURL(blob);
|
|
|
|
let image = document.createElement('img');
|
|
|
|
let image = document.createElement('img');
|
|
|
|
image.onload = () =>
|
|
|
|
image.onload = () =>
|
|
|
|
{
|
|
|
|
{
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
|
|
|
|
imageCache.set(md5, image);
|
|
|
|
res(image);
|
|
|
|
res(image);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
image.onerror = (err) =>
|
|
|
|
image.onerror = (err) =>
|
|
|
@ -23,5 +30,20 @@ function loaderImage(blob: File): Promise<HTMLImageElement>
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
rej(err);
|
|
|
|
rej(err);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
image.src = url;
|
|
|
|
})
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//通过md5来加载图片.这个方法会尝试从缓存里面读取,也会尝试从indexedDb读取,未来也会支持从外部的网站读取.
|
|
|
|
|
|
|
|
export async function loaderImageFromMd5(md5: string): Promise<HTMLImageElement>
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
if (imageCache.has(md5))
|
|
|
|
|
|
|
|
return imageCache.get(md5);
|
|
|
|
|
|
|
|
let store = await IndexedDbStore.CADStore();
|
|
|
|
|
|
|
|
let file = await store.Get(StoreName.Texture, md5) as File;
|
|
|
|
|
|
|
|
if (file)
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
|
|
return await loaderImage(file);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|