ΠΡΠΎ ΠΏΡΠΎΡΡΠΎΠΉ Π³Π΅Π½Π΅ΡΠ°ΡΠΎΡ Π³Π»ΡΠΏΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ c ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ. Π Π°Π±ΠΎΡΠ°Π΅Ρ ΡΠ°ΠΊ ΠΆΠ΅ ΠΏΡΠΎΡΡΠΎ ΠΊΠ°ΠΊ ΠΊΠ°ΠΌΠ΅Π½Ρ πͺ¨.
import { ImageManager } from "dummyimagejs";
// Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ, ΠΎΠ½ ΠΏΠΎΠ·Π²ΠΎΠ»Π΅Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ
// ΡΡΠΎ ΠΎΠ΄Π½ΠΎ ΠΈ ΡΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΠΎΠ·Π΄Π°ΡΡΡΡ Π»ΠΈΡΡ ΠΎΠ΄Π½Π°ΠΆΠ΄Ρ
const imageManager = new ImageManager();
// Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ°ΠΌΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅, Π΅ΡΠ»ΠΈ Π½Π΅ ΠΏΠ΅ΡΠ΅Π΄Π°Π²Π°ΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ
// ΡΠΎ Π±ΡΠ΄ΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡΡΡ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΏΠΎ ΡΠΌΠΎΠ»ΡΠ°Π½ΠΈΡ
const image = imageManager.createImage();
// ΠΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡΠ΄Π΅Ρ ΡΠΎΠ·Π΄Π°Π½ΠΎ ΠΈ Π·Π°ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΎ
image.asBase64() // data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
// ΠΠ΅ΡΠ½Π΅ΡΡΡ Π·Π°ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅
image.asBase64() // data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...
ΠΡ ΠΏΠΎΠ»ΡΡΠΈΠΌ
Π ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅, Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ ΠΈΠ· ΡΠ°ΠΏΠΊΠΈ
import { ImageManager } from "dummyimagejs";
const imageManager = new ImageManager();
const image = imageManager.createImage({
width: 1012,
height: 300,
fontWieght: 700,
color: "#000000",
backgroundColor: "#f7e017",
text: "π DummyImageJS π"
});
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ° πͺ
npm -i dummyimagejs
π
ΠΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΡ Image
interface ImageParams {
width?: number;
height?: number;
text?: string;
fontFace?: string;
fontWieght?: FontWeight;
color?: string;
backgroundColor?: string;
}
class Image {
constructor(params?: ImageParams)
Π‘Π°ΠΌ ΠΏΠΎ ΡΠ΅Π±Π΅ ΠΊΠ»Π°ΡΡ [Image] ΡΠ΅Π°Π»ΠΈΠ·ΡΠ΅Ρ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠ³Π΅Π½Π΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΠΈ Π²ΡΠ·ΠΎΠ²Π΅ ΠΌΠ΅ΡΠΎΠ΄Π° asBase64() ΠΈΠ»ΠΈ asBlob(), ΠΎΠ΄Π½Π°ΠΊΠΎ ΡΡΠΎ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ ΠΌΠ°Π»ΠΎ ΡΠΌΡΡΠ»Π°, Π΅ΡΠ»ΠΈ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠΎΠ·Π°ΡΡ Π΄Π΅ΡΡΡΠΎΠΊ ΠΈΠ½ΡΡΠ°Π½ΡΠΎΠ² [Image], ΠΏΠΎΡΡΠΎΠΌΡ Π½Π°ΠΌ Π½ΡΠΆΠ΅Π½ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅Ρ, Π³Π°ΡΠ°Π½ΡΠΈΡΡΡΡΠΈΠΉ ΡΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π»ΠΈΡΡ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ½ΡΡΠ°Π½ΡΠ° [Image] Ρ ΠΈΠ΄Π΅Π½ΡΠΈΡΠ½ΡΠΌΠΈ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΠ°ΠΌΠΈ.
ΠΡΡ ΠΎΠ΄Ρ ΠΈΠ· Π»ΠΎΠ³ΠΈΡΠ΅ΡΠΊΠΈΡ ΡΠΎΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Image Ρ ΡΠ°Π½ΠΈΡ Π»ΠΈΡΡ ΠΎΠ΄ΠΈΠ½ Π·Π°ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ΅ΠΊΡ ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ.
image = new Image();
// Π‘Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ base64 ΠΈ Π·Π°ΠΊΠ΅ΡΠΈΡΡΠ΅Ρ
image.asBase64()
// Π‘Π³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ blob ΠΈ Π·Π°ΠΊΠ΅ΡΠΈΡΡΠ΅Ρ
image.asBlob()
// ΠΡΠ³ΡΡΠ·ΠΈΡ blob ΠΈΠ· ΠΏΠ°ΠΌΡΡΠΈ,
// ΡΠ³Π΅Π½Π΅ΡΠΈΡΡΠ΅Ρ base64 ΠΈ Π·Π°ΠΊΠ΅ΡΠΈΡΡΠ΅Ρ
image.asBase64()
ΠΠ΅ΡΡΠ΅ΡΡ
key
public get key(): string
ΠΠ΅ΡΠΎΠ΄Ρ
asBase64
public async asBase64(): Promise<string | undefined>
asBlob
public async asBlob(): Promise<string | undefined>
beforeDelete
public beforeDelete(): void
Π‘ΡΠ°ΡΠΈΡΠ΅ΡΠΊΠΈΠ΅ ΠΌΠ΅ΡΠΎΠ΄Ρ
getKey
public static getKey(params?: ImageParams): string
ImageManager
class ImageManager extends Manager<Image>
Π Π΅Π°Π»ΠΈΠ·ΡΠ΅Ρ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΠΎΠ² [Image], [ImageManager] β ΡΠΈΠ½Π³Π»ΡΠΎΠ½, ΡΡΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ Π³Π°ΡΠ°Π½ΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ΅ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅ Π΅Π΄ΠΈΠ½ΡΡΠ²Π΅Π½Π½ΠΎΠΉ ΠΊΠΎΠΏΠΈΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π² Π»ΡΠ±ΠΎΠΌ ΠΌΠ΅ΡΡΠ΅.
ΠΠ΅ΡΠΎΠ΄Ρ
createImage
interface ImageParams {
width?: number;
height?: number;
text?: string;
fontFace?: string;
fontWieght?: FontWeight;
color?: string;
backgroundColor?: string;
}
createImage (params?: ImageParams): Image
deleteImage
deleteImage (key: string): boolean
deleteAll
deleteAll (): void
Manager
abstract class Manager<T> extends Singleton implements Map<string, T>
ΠΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Ρ Π²Π°Ρ Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ ΠΏΠΎΡΡΠ΅Π±Π½ΠΎΡΡΡ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ ΡΠ²ΠΎΠ΅Π³ΠΎ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ°, ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΡΠ»Π΅Π΄ΡΡΡΡ ΠΎΡ ΠΊΠ»Π°ΡΡΠ° [Manager] ΠΏΠΎΠ΄ΡΠΎΠ±Π½Π΅Π΅ Π² ΡΠ°Π·Π΄Π΅Π»Π΅ Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ°
ΠΡΠΈΠΌΠ΅ΡΡ
Π Π΅Π°Π»ΠΈΠ·Π°ΡΠΈΡ ΡΠΎΠ±ΡΡΠ²Π΅Π½Π½ΠΎΠ³ΠΎ ΠΌΠ΅Π½Π΅Π΄ΠΆΠ΅ΡΠ°
import { Manager, Image } from "dummyimagejs";
import { ImageParams } from "dummyimagejs/types/Image";
interface TemporalyCachedImage {
image: Image;
timer: number;
}
export default class TemporalyCachedImageManager extends
Manager<TemporalyCachedImage> {
public createImage(params?: ImageParams): Image {
const key = Image.getKey(params);
let cached = this.get(key);
if (!cached) {
cached = {
image: new Image(params),
timer: setTimeout(() => {
this.deleteImage(key);
}, 10000)
};
this.set(key, cached);
}
return cached.image;
}
public deleteImage(key: string): boolean {
const cached = this.get(key);
if (cached) {
cached.image?.beforeDelete();
return this.delete(key);
}
return false;
}
public deleteAll(): void {
this.forEach(({ image }) => image.beforeDelete());
this.clear();
}
}
Written with StackEdit.