html2canvas 实现屏幕截图、生成海报功能

需求

vue3+element-plus 后台管理需要添加一个根据商品内容生成分享海报的功能

实现逻辑

创建一个海报模板：通过 HTML 和 CSS 来构建一个海报模板。
使用html2canvas 截图：如果要生成图片，可以使用 第三方库 html2canvas 将 HTML 内容转化为图片。
添加自定义内容：可以自定义海报的内容，如文本、图片等，然后通过 Vue 动态更新这些内容。
下载生成的海报：可以点击按钮下载生成的海报图片。

html2canvas实现海报功能

1、安装 html2canvas 库

npm install html2canvas --save

2、创建海报组件

<template>
  <div>
    <!-- 海报内容 -->
    <div ref="posterRef" class="poster">
      <div class="poster-header">
        <h1>{{ info.title }}</h1>
      </div>
      <div class="poster-body">
        <img :src="imageUrl" alt="Poster Image" class="poster-image" />
        <p>{{ info.description }}</p>
      </div>
      <div class="poster-footer">
        <span>{{ info.footerText }}</span>
      </div>
    </div>
 
    <!-- 下载按钮 -->
    <button @click="generatePoster">生成海报</button>
    <button @click="downloadPoster" v-if="info.imageData">下载海报</button>
  </div>
</template>
 
<script setup>
import html2canvas from 'html2canvas';
import { ref } from 'vue'
 const info = ref({
 	title: '我的海报',
    imageUrl: 'https://example.com/image.png', // 你可以使用本地或网络图片
    description: '这是我的自定义海报，包含描述内容。',
    footerText: '开心',
    imageData: null
 })
const posterRef = ref()
// 生成海报
 function generatePoster() {
   const posterElement = posterRef.value
   // 使用 html2canvas 将海报转化为图片
   html2canvas(posterElement).then(canvas => {
     info.value.imageData = canvas.toDataURL('image/png');
   });
 },
 // 下载海报
function downloadPoster() {
    const link = document.createElement('a');
    link.href = this.imageData;
    link.download = 'poster.png'; // 设置文件名
    link.click();
  }
</script>
 
<style scoped>
.poster {
  width: 500px;
  height: 700px;
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: Arial, sans-serif;
}
 
.poster-header {
  text-align: center;
}
 
.poster-body {
  text-align: center;
  margin: 20px 0;
}
 
.poster-image {
  width: 100%;
  height: auto;
}
 
.poster-footer {
  text-align: center;
  font-size: 14px;
  color: #888;
}
 
button {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}
button:hover {
  background-color: #45a049;
}
</style>