Vue と Canvas を使用してパーソナライズされた名刺ジェネレーターを開発する方法

vue create business-card-generator

<template>
  <canvas ref="canvas"></canvas>
</template>

<script>
export default {
  mounted() {
    this.drawCard();
  },
  methods: {
    drawCard() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      
      // 绘制名片的背景
      ctx.fillStyle = '#F0F0F0';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      
      // 绘制名片的边框
      ctx.strokeStyle = '#000000';
      ctx.strokeRect(10, 10, canvas.width - 20, canvas.height - 20);
      
      // 绘制名片的文字
      ctx.fillStyle = '#000000';
      ctx.font = 'bold 20px Arial';
      ctx.fillText('个人名片', (canvas.width - ctx.measureText('个人名片').width) / 2, 50);
      
      // 绘制名片的logo
      const logoImg = new Image();
      logoImg.src = 'path/to/logo.png';
      logoImg.onload = () => {
        ctx.drawImage(logoImg, 50, 100, 100, 100);
      }
    }
  }
};
</script>

<style scoped>
canvas {
  width: 500px;
  height: 300px;
}
</style>

<template>
  <div>
    <canvas-card></canvas-card>
    <div>
      <button @click="exportCard">导出名片</button>
    </div>
  </div>
</template>

<script>
import CanvasCard from '@/components/CanvasCard.vue';

export default {
  components: {
    CanvasCard
  },
  methods: {
    exportCard() {
      const canvas = this.$refs.canvas.$refs.canvas;
      const dataURL = canvas.toDataURL('image/png');
      
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'business-card.png';
      link.click();
    }
  }
};
</script>

<style scoped>
button {
  margin-top: 10px;
}
</style>

<template>
  <div id="app">
    <generate-card></generate-card>
  </div>
</template>

<script>
import GenerateCard from './views/GenerateCard.vue';

export default {
  components: {
    GenerateCard
  }
};
</script>

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App)
}).$mount('#app');