服务网站建设的公司安装网站系统

需求

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>