75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<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" style="max-width: 50vw; max-height: 50vh;"></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> |