feat: Add align param

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'

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")

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))
+  }
 }

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}
-    <image id="${cur}" width="${width}" height="${height}" xlink:href="${data}" />`
+    <image id="${cur}" width="${toFixed(width, 5)}" height="${toFixed(height, 5)}" xlink:href="${data}" />`
 
     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}
-    <use x="${x}" xlink:href="#${cur}" />`
+    <use x="${toFixed(x, 5)}"${yOffset ? ` y="${toFixed(yOffset, 5)}"` : ''} xlink:href="#${cur}" />`
 
     x += width + offset
 
@@ -91,7 +101,7 @@ function getCountImage(params) {
 
   return `<?xml version="1.0" encoding="UTF-8"?>
 <!-- Generated by https://github.com/journey-ad/Moe-Counter -->
-<svg viewBox="0 0 ${x} ${y}" width="${x}" height="${y}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0 0 ${toFixed(x, 5)} ${toFixed(y, 5)}" width="${toFixed(x, 5)}" height="${toFixed(y, 5)}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <title>Moe Counter!</title>
   <style>${style}</style>
   <defs>${defs}

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