【源码】基于Vue.js框架的微信平台海报生成系统

项目简介

本项目基于Vue.js框架开发，专为有微信平台H5项目海报生成需求而设计。系统提供两种生成海报的方法，即直接用canvas书写布局以及通过html + css结合html2canvas插件实现，还能将海报内容转换为base64格式在<img/>标签中显示。

项目的主要特性和功能

• 支持使用canvas或html + css两种方式进行海报布局。
• 可借助插件把网页内容转换为canvas，再转换为base64格式。
• 提供两种生成海报方法的优缺点分析，方便开发者根据实际情况灵活选择。

安装使用步骤

安装依赖

项目已下载源码文件后，可通过以下命令安装依赖： shell npm install 或者 shell yarn install

开发环境启动

若要在开发环境启动项目，实现实时编译和热重载，可运行： shell npm run dev

生产环境编译

若要对项目进行编译和压缩，以便在生产环境使用，可运行： shell npm run build

代码规范检查

若要检查和修复代码规范问题，可运行： shell npm run lint

使用方法

使用canvas生成海报

1. 引入common文件夹下封装好的Poster组件。
2. 配置四个参数designWidth、degignHeight、imgList、textList，分别对应设计稿的宽、高、图片布局、文字布局。
3. 按照配置生成canvas元素布局，将内容转换为base64格式在<img/>标签中显示。

使用html2canvas生成海报

1. 用html + css完成页面布局。
2. 使用html2canvas插件把相应的dom元素转换为canvas内容。
3. 将canvas内容通过toDataURL转换为base64格式在<img/>标签中显示。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】