vue将二维码做成名片，并且生成图片保存

news2024/11/13 19:02:57

效果图

在这里插入图片描述

1. 安装html2canvas

首先，你需要在你的Vue项目中安装html2canvas。你可以通过npm或yarn来安装它：

npm install html2canvas  
# 或者  
yarn add html2canvas

2.组件形式

2.1 创建组件

在你的Vue项目中，创建一个新的Vue组件，比如BusinessCard.vue，用来展示名片并处理图片的保存。

<template>  
  <div class="business-card-container" ref="businessCard">  
    <div class="qrcode-container">  
      <img :src="qrcodeSrc" alt="QR Code" class="qrcode">  
    </div>  
    <div class="info">  
      <h2>{{ name }}</h2>  
      <p>{{ position }}</p>  
      <p>联系电话：{{ phone }}</p>  
      <p>邮箱：{{ email }}</p>  
    </div>  
    <button @click="saveAsImage">保存为图片</button>  
  </div>  
</template>  
  
<script>  
import html2canvas from 'html2canvas';  
  
export default {  
  data() {  
    return {  
      qrcodeSrc: 'path/to/your/qrcode.png', // 你的二维码图片路径  
      name: '张三',  
      position: '软件工程师',  
      phone: '123-456-7890',  
      email: 'zhangsan@example.com',  
    };  
  },  
  methods: {  
    async saveAsImage() {  
      try {  
        const canvas = await html2canvas(this.$refs.businessCard, {  
          scale: 2, // 可以根据需要调整缩放比例  
          useCORS: true, // 如果二维码图片是跨域的，需要设置这个选项  
        });  
  
        // 创建一个链接，点击时下载图片  
        const link = document.createElement('a');  
        link.download = 'business-card.png';  
        link.href = canvas.toDataURL('image/png');  
        link.click();  
  
        // 可选：显示一些成功的消息  
        alert('名片已保存为图片！');  
      } catch (error) {  
        console.error('保存图片失败:', error);  
        alert('保存图片时发生错误！');  
      }  
    },  
  },  
};  
</script>  
  
<style scoped>  
.business-card-container {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 20px;  
  border: 1px solid #ccc;  
  width: 300px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
}  
  
.qrcode-container {  
  width: 100px;  
  height: 100px;  
  overflow: hidden;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.qrcode {  
  width: 100%;  
  height: auto;  
  max-width: 100%;  
  max-height: 100%;  
}  
  
.info {  
  flex: 1;  
  padding-left: 20px;  
}  
</style>

2.2 使用组件

在你的Vue应用的某个页面或组件中，引入并使用BusinessCard组件。

<template>  
  <div>  
    <BusinessCard />  
  </div>  
</template>  
  
<script>  
import BusinessCard from './components/BusinessCard.vue';  
  
export default {  
  components: {  
    BusinessCard,  
  },  
};  
</script>

3.非组件形式

首先，确保你已经通过npm或yarn安装了html2canvas，然后使用以下代码

<template>  
  <div>  
    <!-- 名片内容 -->  
    <div id="businessCard" class="business-card-container">  
      <div class="qrcode-container">  
        <img :src="qrcodeSrc" alt="QR Code" class="qrcode">  
      </div>  
      <div class="info">  
        <h2>{{ name }}</h2>  
        <p>{{ position }}</p>  
        <p>联系电话：{{ phone }}</p>  
        <p>邮箱：{{ email }}</p>  
      </div>  
      <button @click="saveAsImage">保存为图片</button>  
    </div>  
  </div>  
</template>  
  
<script>  
// 引入html2canvas  
import html2canvas from 'html2canvas';  
  
export default {  
  data() {  
    return {  
      qrcodeSrc: 'path/to/your/qrcode.png', // 你的二维码图片路径  
      name: '张三',  
      position: '软件工程师',  
      phone: '123-456-7890',  
      email: 'zhangsan@example.com',  
    };  
  },  
  methods: {  
    saveAsImage() {  
      // 使用html2canvas将DOM元素渲染成Canvas  
      html2canvas(document.getElementById('businessCard'), {  
        scale: 2, // 缩放比例  
        useCORS: true, // 如果二维码图片是跨域的，需要设置这个选项  
      }).then(canvas => {  
        // 将Canvas转换为图片并触发下载  
        const imageUrl = canvas.toDataURL('image/png');  
        const link = document.createElement('a');  
        link.download = 'business-card.png';  
        link.href = imageUrl;  
        link.click();  
  
        // 可选：显示一些成功的消息  
        alert('名片已保存为图片！');  
      }).catch(error => {  
        console.error('保存图片失败:', error);  
        alert('保存图片时发生错误！');  
      });  
    },  
  },  
};  
</script>  

<style scoped>  
.business-card-container {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 20px;  
  border: 1px solid #ccc;  
  width: 300px;  
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
}  
  
.qrcode-container {  
  width: 100px;  
  height: 100px;  
  overflow: hidden;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  
  
.qrcode {  
  width: 100%;  
  height: auto;  
  max-width: 100%;  
  max-height: 100%;  
}  
  
.info {  
  flex: 1;  
  padding-left: 20px;  
}  
</style>