# 海报生成

**Repository Path**: devmodu/poster-generation

## Basic Information

- **Project Name**: 海报生成
- **Description**: 利用html2canvas生成base64海报，海报排版定义灵活，稍微会点前端知识的都能轻易的修改和自定义宣传海报模版。这边只是提供示例模版和思路，如需生成自定义海报模版需要二次开发
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2023-03-16
- **Last Updated**: 2023-03-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 以下为小程序例子部分代码

## 先上效果图
[<img src="screen.png" width="300px">]()
[<img src="screen2.png" width="300px">]()
[<img src="screen3.png" width="300px">]()
[<img src="screen4.png" width="300px">]()
[<img src="screen5.png" width="300px">]()
[<img src="screen6.png" width="300px">]()

## 第一步
```
把本实例放到服务器的能访问的目录下，只要能被访问到就行
```

## 第二步
```
<!-- 在应用页面添加 web-view 组件 -->
<web-view :src="src" @message="message"></web-view>
```

```
// 页面主要代码
export default {
	data() {
		return {
			src: `https://www.xxxx.com/poster-generation/index.html` // 代码放到服务器上就行
		}
	},
	methods: {
		// base64 转成本地临时文件
		// base64 去除逗号前面的图片格式
		base64ToImageFile(base64, name, callback) {
			callback = callback || function() {}
			base64 = base64.replace(/^data:image\/\w+;base64,/, "")
			if (typeof name == 'undefined') {
				name = 'img_' + Math.floor(Math.random() * 10000)
			}
			
			// 这里只以小程序为例，其它平台可以使用 https://ext.dcloud.net.cn/plugin?id=123#detail 这个插件
			let filePath = `${wx.env.USER_DATA_PATH}/${name}.png`
			uni.getFileSystemManager().writeFile({
				filePath: filePath ,  // 创建一个临时文件名
				data: base64,    // 写入的文本或二进制数据
				encoding: 'base64',  // 写入当前文件的字符编码
				success: res => {
					callback(filePath)
				},
				fail: err => {
					console.log(err)
				}
			})
		}
	},
	// 接收截图完成回调事件
	message(data) {
		// 此时 data.detail.data[0].action 就已经是生成好的海报 base64 编码
		this.base64ToImageFile(data.detail.data[0].action, 'poster', res => {
			uni.saveImageToPhotosAlbum({
				filePath: res,
				success: (res) => {
					console.log("保存图片到相册成功")
					console.log(res)
				},
				fail: (err) => {
					console.log(err)
				}
			})
		})
	}
}
```

## 说明
```
1、首先这里我只提供实现的思路
2、海报的生成由 html2canvas 实现，理论上是兼容所有的平台（目前只测试了小程序的）
3、需要二次开发
4、欢迎留言交流
```

## 优势
```
会点前端基础的都能添加和修改海报模版
海报模版定义自由
```

## 如何 base64 转成本地临时文件
[点击查看](https://ext.dcloud.net.cn/plugin?id=123#detail)

## 微信扫码联系我
[<img src="https://www.zhangyexing.cn/card/code.png" width="300px">]()