diff --git a/assets/script.js b/assets/script.js index 8a33542..9babf1a 100644 --- a/assets/script.js +++ b/assets/script.js @@ -8,6 +8,7 @@ theme: document.getElementById('theme'), padding: document.getElementById('padding'), offset: document.getElementById('offset'), + align: document.getElementById('align'), scale: document.getElementById('scale'), pixelated: document.getElementById('pixelated'), darkmode: document.getElementById('darkmode'), @@ -38,6 +39,7 @@ theme: theme.value || 'moebooru', padding: padding.value || '7', offset: offset.value || '0', + align: align.value || 'top', scale: scale.value || '1', pixelated: pixelated.checked ? '1' : '0', darkmode: darkmode.value || 'auto' diff --git a/index.js b/index.js index 2091f51..ac994ba 100644 --- a/index.js +++ b/index.js @@ -36,6 +36,7 @@ app.get(["/@:name", "/get/@:name"], num: z.coerce.number().min(0).max(1000000000000000).default(0), // a carry-safe integer, less than `2^53-1`, and aesthetically pleasing in decimal. padding: z.coerce.number().min(0).max(16).default(7), offset: z.coerce.number().min(-500).max(500).default(0), + align: z.enum(["top", "center", "bottom"]).default("top"), scale: z.coerce.number().min(0.1).max(2).default(1), pixelated: z.enum(["0", "1"]).default("1"), darkmode: z.enum(["0", "1", "auto"]).default("auto") diff --git a/utils/index.js b/utils/index.js index a06a32b..687737b 100644 --- a/utils/index.js +++ b/utils/index.js @@ -2,4 +2,7 @@ module.exports = { randomArray: (arr) => { return arr[Math.floor(Math.random() * arr.length)] }, + toFixed: (num, digits = 2) => { + return parseFloat(Number(num).toFixed(digits)) + } } diff --git a/utils/themify.js b/utils/themify.js index 0628846..7aa6583 100644 --- a/utils/themify.js +++ b/utils/themify.js @@ -4,6 +4,7 @@ const fs = require('fs') const path = require('path') const mimeType = require('mime-types') const sizeOf = require('image-size') +const { toFixed } = require('./index') const themePath = path.resolve(__dirname, '../assets/theme') const imgExts = ['.jpg', '.jpeg', '.png', '.gif', '.webp'] @@ -41,7 +42,7 @@ function convertToDatauri(path) { } function getCountImage(params) { - let { count, theme = 'moebooru', padding = 7, offset = 0, scale = 1, pixelated = '1', darkmode = 'auto' } = params + let { count, theme = 'moebooru', padding = 7, offset = 0, align = 'top', scale = 1, pixelated = '1', darkmode = 'auto' } = params if (!(theme in themeList)) theme = 'moebooru' padding = parseInt(padding, 10) @@ -58,20 +59,29 @@ function getCountImage(params) { width *= scale height *= scale - if (height > y) y = height + y = Math.max(y, height) ret = `${ret} - ` + ` return ret }, '') const parts = countArray.reduce((ret, cur) => { - let { width } = themeList[theme][cur] + let { width, height } = themeList[theme][cur] width *= scale + height *= scale + + let yOffset = 0 + + if (align === 'center') { + yOffset = (y - height) / 2 + } else if (align === 'bottom') { + yOffset = y - height + } const image = `${ret} - ` + ` x += width + offset @@ -91,7 +101,7 @@ function getCountImage(params) { return ` - + Moe Counter! ${defs} diff --git a/views/index.pug b/views/index.pug index 990516a..5e5303d 100644 --- a/views/index.pug +++ b/views/index.pug @@ -104,13 +104,21 @@ html td Set the image scale, between 0.1-2, default is code 1 td: input#scale(type='number', value='1', min='0.1', max='2', step='0.1', oninput='this.value = this.value.replace(/[^0-9|\.]/g, "")') + tr + td: code align + td Set the image align, Enum top/center/bottom, default is + code top + td: select#align(name="align") + option(value="top", selected) top + option(value="center") center + option(value="bottom") bottom tr td: code pixelated td Enable pixelated mode, Enum 0/1, default is code 1 td input#pixelated(type='checkbox', role='switch', checked) - label(for='pixelated'): span + label(for='pixelated'): span tr td: code darkmode td Enable dark mode, Enum 0/1/auto, default is