-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: replace sharp with skia-canvas for placeholder drawing
- Loading branch information
Showing
11 changed files
with
219 additions
and
272 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,52 +1,59 @@ | ||
| import * as path from 'path' | ||
| import { promisify } from 'util' | ||
| import { readFile } from 'fs' | ||
| import * as sharp from 'sharp' | ||
| import { Canvas, Image, loadImage } from '@julusian/skia-canvas' | ||
|
|
||
| const readFileP = promisify(readFile) | ||
|
|
||
| export class CardGenerator { | ||
| private iconImage: Buffer | undefined | ||
| private iconImage: Image | undefined | ||
|
|
||
| async loadIcon(): Promise<Buffer> { | ||
| constructor() { | ||
| // Ensure skia-canvas is loaded at startup | ||
| new Canvas() | ||
| } | ||
|
|
||
| async loadIcon(): Promise<Image> { | ||
| if (!this.iconImage) { | ||
| const rawData = await readFileP(path.join(__dirname, '../assets/icon.png')) | ||
| this.iconImage = rawData | ||
|
|
||
| this.iconImage = await loadImage(rawData) | ||
| } | ||
|
|
||
| return this.iconImage | ||
| } | ||
|
|
||
| async generateBasicCard(width: number, height: number, remoteIp: string, status: string): Promise<Buffer> { | ||
| const size = Math.round(Math.min(width, height) * 0.6) | ||
| const icon = await sharp(await this.loadIcon()) | ||
| .resize(size) | ||
| .toBuffer() | ||
|
|
||
| return sharp({ | ||
| create: { | ||
| width: width, | ||
| height: height, | ||
| channels: 3, | ||
| background: { r: 0, g: 0, b: 0 }, | ||
| }, | ||
| }) | ||
| .composite([ | ||
| { | ||
| input: icon, | ||
| }, | ||
| { | ||
| input: Buffer.from( | ||
| `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width - 20} 40" version="1.1"> | ||
| <text font-family="'sans-serif'" font-size="12px" x="10" y="32" fill="#fff" text-anchor="left">Remote: ${remoteIp}</text> | ||
| <text font-family="'sans-serif'" font-size="12px" x="10" y="12" fill="#fff" text-anchor="left">Status: ${status}</text> | ||
| </svg>` | ||
| ), | ||
| top: height - 20, | ||
| left: 10, | ||
| }, | ||
| ]) | ||
| .removeAlpha() | ||
| .toBuffer() | ||
| const iconImage = await this.loadIcon() | ||
|
|
||
| const canvas = new Canvas(width, height) | ||
| const context2d = canvas.getContext('2d') | ||
|
|
||
| // draw icon | ||
| const iconTargetSize = Math.round(Math.min(width, height) * 0.6) | ||
| const iconTargetX = (width - iconTargetSize) / 2 | ||
| const iconTargetY = (height - iconTargetSize) / 2 | ||
| context2d.drawImage( | ||
| iconImage, | ||
| 0, | ||
| 0, | ||
| iconImage.width, | ||
| iconImage.height, | ||
| iconTargetX, | ||
| iconTargetY, | ||
| iconTargetSize, | ||
| iconTargetSize | ||
| ) | ||
|
|
||
| // draw text | ||
| context2d.font = `normal normal normal ${12}px sans-serif` | ||
| context2d.textAlign = 'left' | ||
| context2d.fillStyle = '#ffffff' | ||
|
|
||
| context2d.fillText(`Remote: ${remoteIp}`, 10, height - 10) | ||
| context2d.fillText(`Status: ${status}`, 10, height - 30) | ||
|
|
||
| // return result | ||
| return Buffer.from(context2d.getImageData(0, 0, width, height).data) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,15 @@ | ||
| import * as imageRs from '@julusian/image-rs' | ||
|
|
||
| export const DEFAULT_PORT = 16622 | ||
|
|
||
| export function assertNever(_v: never): void { | ||
| // Nothing to do | ||
| } | ||
|
|
||
| export async function rgbaToRgb(input: Uint8Array, width: number, height: number): Promise<Buffer> { | ||
| return Buffer.from( | ||
| (await imageRs.ImageTransformer.fromBuffer(input, width, height, imageRs.PixelFormat.Rgba) | ||
| .scale(width, height) | ||
| .toBuffer(imageRs.PixelFormat.Rgb)) as Uint8Array | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.