Add dummy image tool

This commit is contained in:
Illya Marchenko 2024-04-11 19:22:08 +03:00
parent 6c29eea618
commit 1c7f0e2ee3
Signed by: stuzer05
GPG Key ID: A6ABAAA9268F9F4F
3 changed files with 81 additions and 0 deletions

View File

@ -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',

View File

@ -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

75
src/views/DummyImage.vue Normal file
View File

@ -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>