random-web-tools/src/views/DummyImage.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>