OV-423: * support background color for preview

Author: Sanchousina

backend/src/common/services/image/image.service.ts

@@ -25,32 +25,48 @@ class ImageService {
         const background = composition.scenes[0]?.background;
 
         if (background?.url) {
-            const avatarImageBuffer =
-                await this.imageApi.getImageBuffer(avatarImage);
             const backgroundImageBuffer = await this.imageApi.getImageBuffer(
                 background.url,
             );
 
-            const previewBuffer = await this.composeImages(
-                avatarImageBuffer,
+            return await this.combineAvatarWithBackground(
+                avatarImage,
                 backgroundImageBuffer,
             );
-
-            const fileName = `preview_${Date.now()}.jpg`;
-
-            await this.fileService.uploadFile(previewBuffer, fileName);
-
-            return this.fileService.getCloudFrontFileUrl(fileName);
         }
 
         if (background?.color) {
-            // TODO: create empty image with bg color
-            // then combine avatar and this new image
+            const backgroundColorImageBuffer =
+                await this.createImageWithBackgroundColor(background.color);
+
+            return await this.combineAvatarWithBackground(
+                avatarImage,
+                backgroundColorImageBuffer,
+            );
         }
 
         return avatarImage;
     }
 
+    private async combineAvatarWithBackground(
+        avatarImage: string,
+        background: Buffer,
+    ): Promise<string> {
+        const avatarImageBuffer =
+            await this.imageApi.getImageBuffer(avatarImage);
+
+        const previewBuffer = await this.composeImages(
+            avatarImageBuffer,
+            background,
+        );
+
+        const fileName = `preview_${Date.now()}.jpg`;
+
+        await this.fileService.uploadFile(previewBuffer, fileName);
+
+        return this.fileService.getCloudFrontFileUrl(fileName);
+    }
+
     private async composeImages(
         avatar: Buffer,
         background: Buffer,
@@ -73,6 +89,21 @@ class ImageService {
             .composite([{ input: resizedAvatar, blend: 'over' }])
             .toBuffer();
     }
+
+    private async createImageWithBackgroundColor(
+        backgroundColor: string,
+    ): Promise<Buffer> {
+        return await sharp({
+            create: {
+                width: PREVIEW_WIDTH,
+                height: PREVIEW_HEIGHT,
+                channels: 3,
+                background: backgroundColor,
+            },
+        })
+            .toFormat('png')
+            .toBuffer();
+    }
 }
 
 export { ImageService };