本站设计-海报分享功能简介以及图片跨域问题解决方法

海报分享功能,简单的说就是把文章生成一张带有二维码链接的图片,方便在社交软件进行分享。一般说需要插件才能实现此功能,但是子比主题自带此功能,全自动生成,使用简单、简洁好看

本站设计-海报分享功能简介以及图片跨域问题解决方法 插图1

顺便说一下此功能的加载方式,在主题功能介绍中就提到过:主题的功能也才用模块动态加载的方式,就是为了让页面加载更快!
那么到底是什么意思呢?此功能才用JS-canvas 绘图的方式,所需要的全部代码文件一共12KB!但是这12KB的文件的并不会在页面加载的时候加载此文件!而是在点击分享按钮之后才会加载这12KB的文件并生成图片!
使用这样的逻辑,在页面加载的时候相当于没有开启此功能一样,同时主题大量的采用了这样的动态加载方案,目的只有一个!那就是快!再快!

功能设置

  • 在Wordpress后台-主题设置-文章页功能:开启生成海报分享功能
  • 同时设置好默认的默认图像、logo和 底部文案
  • 保存后在每一篇文章的分享按钮中就会增加 海报分享 按钮啦
本站设计-海报分享功能简介以及图片跨域问题解决方法 插图2

此功能才用JS-canvas 绘图的方案,可能会有一定兼容性的问题!在某些较老的浏览器上可能会出现不能生成的情况!
另外如果网站图片使用了OSS等云存储,一定要先设置好跨域规则!教程请参考下方

解决图片跨域问题

如果您网站的图片是保存在云储存上,例如阿里OSS,腾讯OCS,七牛云等等,并且此功能一直显示加载中而不能生成图片!那么请继续往下看!

这是什么原因造成的呢?简单的说就是因为浏览器安全策略导致跨域的图片不能加载!解决的方式也十分简单,给图片添加Access-Control-Allow-Origin请求头即可!

很简单,也就几步搞定,以下我就按照阿里云OSS为例详细的教大家设置此功能!其它云储存都差不多

1.登录阿里云对象储存OSS控制台,选择你的Bucket,找到跨域设置

本站设计-海报分享功能简介以及图片跨域问题解决方法 插图3

2.按照下面截图设置保存!

本站设计-海报分享功能简介以及图片跨域问题解决方法 插图4

3.重点请注意!

设置好跨域规则前,已经上传的图片是无效的!
设置好跨域规程后 ,新上传的图片才有效!

所以,大家懂了吧,此功能需要获取文章的特色图像,所以设置好跨域规则前上传的特色图像,就需要重新上传一下啦
我自己测试阿里云OSS是这样的,其它的云存储请自己测试一下!

4.最后细节

如果完成了上面的教程,还是不能生成!
那么请检查一下是不是服务器或者宝塔等管理程序屏蔽了POST请求!

温馨提示:本文最后更新于2022-12-14 20:23:02,某些文章具有时效性,若有错误或已失效,请在下方留言或联系云小叔叔
文章版权声明 1、本网站名称:元宇宙之家
2、本站永久网址:https://liboven.cn
3、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
4、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。

© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸
夸夸
还有吗!没看够!
取消
昵称常用语表情代码图片

    暂无评论内容