Add dummy image tool

src/components/Sidebar.vue

@@ -29,6 +29,7 @@ export default {
         'home': 'Home',
         'explain_crontab': 'Explain crontab',
         'table_to_mediawiki_table': 'Table to Mediawiki table',
+        'dummy_image': 'Dummy image',
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',

src/router/index.js

@@ -21,6 +21,11 @@ const router = createRouter({
 			name: 'table_to_mediawiki_table',
 			component: () => import('../views/TableToMediawikiTable.vue'),
 		},
+		{
+			path: '/dummy_image',
+			name: 'dummy_image',
+			component: () => import('../views/DummyImage.vue'),
+		},
 
 		/**
 		 * String manipulation

src/views/DummyImage.vue

@@ -0,0 +1,75 @@
+<template>
+  <h2 class="tool-title">Dummy image</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label>Dimensions</label>
+    <div style="display: flex">
+      <input class="input" v-model="toolData.width" v-on:keyup="result" v-on:change="result" placeholder="500" type="number" style="width: 70px">px
+      <span style="padding: 0 10px">x</span>
+      <input class="input" v-model="toolData.height" v-on:keyup="result" v-on:change="result" placeholder="500" type="number" style="width: 70px">px
+    </div>
+  </div>
+
+  <div class="input-group">
+    <label for="result">Background colour</label>
+    <input class="input" v-model="toolData.color_bg" v-on:change="result" type="color">
+  </div>
+
+  <div class="input-group">
+    <label for="result">Text colour</label>
+    <input class="input" v-model="toolData.color_text" v-on:change="result" type="color">
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <div :style="{'width': toolData.width, 'height': toolData.height}">
+      <canvas ref="canvas" :width="toolData.width" :height="toolData.height"></canvas>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolData: {
+        width: 500,
+        height: 500,
+        color_bg: '#000000',
+        color_text: '#ffffff',
+      },
+      toolResult: '',
+    };
+  },
+  mounted() {
+    this.result();
+  },
+  methods: {
+    result() {
+      const ctx = this.$refs.canvas.getContext('2d');
+
+      // Set background color
+      ctx.fillStyle = this.toolData.color_bg;
+      ctx.fillRect(0, 0, this.toolData.width, this.toolData.height);
+
+      // Set text color and font
+      ctx.fillStyle = this.toolData.color_text;
+      ctx.font = 'bold 30px Arial';
+
+      // Draw text on the canvas
+      const text = `${this.toolData.width}x${this.toolData.height}`;
+      const textWidth = ctx.measureText(text).width;
+      const x = (this.toolData.width - textWidth) / 2;
+      const y = this.toolData.height / 2 + 10;
+      ctx.fillText(text, x, y);
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+
+</style>