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

WordPress8615阅读模式

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

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

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

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

基本方法

加载html2canvas脚本
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

 

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

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

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

.haibao {
	transform: scale(0.5);
}

 

用于生成并下载海报的JS代码
<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编码的图片,下载时再转换成正常的图片。

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

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

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  8  访客  6  作者  2
    • 两天
      两天 6

      海报确实看着高大上,然而真的没点过几次 :!:

        • 知更鸟
          知更鸟

          @ 两天 我倒是经常点,因为要测试功能,其它P用没有

        • 无不为
          无不为 4

          以前觉得越花哨越好,现在觉得越精简越好,精简意味着加载迅速,用户体验好,尤其是手机端,文章页直接 标题-文章-相关文章。

            • 知更鸟
              知更鸟

              @ 无不为 你说的效果,WP默认主题正好胜任,前提是内容需要很吸引人

              • 1920
                1920 1

                @ 无不为 我现在也觉得越精简越好,但是又希望好看的那种精简,哈哈。

              • 青山
                青山 2

                :lol: 以前觉得高大上,现在再看就是花里胡哨。

                • 皇家元林
                  皇家元林 2

                  这个要是微博或者朋友圈分享倒是很好看。

                  • Kevin
                    Kevin 1

                    分享按钮、朗读也没啥用。。。

                  匿名

                  发表评论

                  匿名网友
                  :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                  拖动滑块以完成验证