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

本文主要是介绍vue将二维码做成名片，并且生成图片保存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

效果图

在这里插入图片描述

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>