最简单的WordPress文章生成海报方法

不知道什么时候开始，国内WordPress主题都弄上了文章海报生成功能，成了标配，没有都不好意思拿出去卖。当然也包括我自己的主题，看上去很高大上，但个人感觉，与主题夜间模式一样，貌似有用的功能，费了很大劲，其实就是个摆设，没什么实用价值，也就是自己没事时会点一点，正常的浏览者没人会关注这个，纯纯的忽悠主题购买者用的。

当初研究个海报功能，也是参考学习别人的方法，后来发现被带沟里了，很简单的功能，结果代码弄的很复杂，其实利用 html2canvas 脚本，几行代码的事。

最简单的WordPress文章生成海报方法

基本方法

<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

<div class="haibao">这里是生成海报图片的内容，自己随便编排</div>
<div class="downhaibao" onclick="downloadToPNG()">下载按钮</div>

可以写个弹窗，点击按钮显示，这不是本文重点，这里只说基本原理方法。

为了让生成的海报图片尺寸够大，但又不让其在页面中显示时占用很大的窗口面积，我们可加上缩放样式代码，缩小一半显示。

.haibao {
	transform: scale(0.5);
}

<script>
function downloadToPNG() {
	const contents = document.getElementsByClassName('haibao');
	// 循环处理每个具有 'haibao' 类的元素
	for (let i = 0; i < contents.length; i++) {
		const content = contents[i];
		// 获取原始大小的宽度和高度
		const width = content.offsetWidth * 2;
		const height = content.offsetHeight * 2;

		// 创建一个Canvas元素，设置其宽度和高度为原始大小
		const canvas = document.createElement('canvas');
		canvas.width = width;
		canvas.height = height;

		// 将Canvas的上下文缩放为原始大小
		const context = canvas.getContext('2d');
		context.scale(2, 2);

		// 使用html2canvas将缩放后的内容渲染到Canvas上
		html2canvas(content, {
			canvas: canvas
		}).then(function(canvas) {
			// 将Canvas转换为PNG数据URL
			const dataURL = canvas.toDataURL('image/png');

			// 创建一个临时的<a>元素，用于下载PNG图片
			const link = document.createElement('a');
			link.download = document.title + '.png'; // 使用文章标题作为图片名称
			link.href = dataURL;

			// 触发点击事件下载PNG图片
			link.click();
		});
	}
}
</script>

代码中有注释一看就明白，基本代码就这些，其它就看你怎么编写生成的海报内容了。

当然你也可以修改“haibao”类名，用于将页面上现有的任意部分生成海报图片，比如直接改为文章正文的类名。

与目前常见的生成海报方法区别：

修改编排海报样式简单方便，比如我目前主题用的海报功能，所有样式编排都是在JS中编写，复杂繁琐，你可能会看到一些主题本身做的还不错，就是生成的海报七扭八歪的，因为编排样式实在是麻烦。

这个方法只在点击下载按钮时生成海报图片，其它方法不是打开页面的同时生成，要不就是点击海报按钮时生成Base64编码的图片，下载时再转换成正常的图片。

至于哪个更消耗资源，个人感觉差不多。

基本原理虽然简单，但对于没有制作主题经验者，还是难度不小，这里只是分享一下方法，同时也做个记录备用。